当前位置: 首页>>编程示例 >>用法及示例精选 >>正文

SVG <metadata>用法及代码示例

SVG 代表可缩放矢量图形，以 XML 格式编写，用于定义基于矢量的 Web 图形

SVG <metadata> 元素允许开发人员说明有关 SVG 的更详细信息，这类似于 <desc> 元素，用于为任何可用的 SVG 元素(无论是容器还是图形元素)提供可访问的文本说明。 <metadata> 应与 XML 命名空间一起使用，如 RDF、FOAF 等。不显示文本说明。

用法:

<svg>
    <metadata>
        <rdf:RDF> ... </rdf:RDF>  
    </metadata>
</svg>

属性：它同时支持全局属性，即全局事件属性以及核心属性。

示例 1：在此示例中，我们正在创建一个 yellow-colored 圆圈，并且在 <metadata> 中，我们使用 RDF 来提供有关该圆圈的信息

HTML


<!DOCTYPE html>
<html>
<head>
    <title>SVG <metadata >Element</title>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <metadata >Element</h3>
    <?xml version="1.0" standalone="yes"?>
        <svg width="100" height="100">
            <circle cx="50"
                    cy="50"
                    r="40"
                    stroke="green"
                    stroke-width="4"
                    fill="yellow" />
            <metadata>
                <rdf:RDF xmlns:rdf=
    "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                         xmlns:rdfs=
    "http://www.w3.org/2000/01/rdf-schema#"
                         xmlns:dc=
    "http://purl.org/dc/elements/1.1/">
                    <rdf:Description about=
    "http://example.org/myfoo" dc:title="Circle"
                           dc:description=
            "A round circle with yellow color"
                           dc:publisher="geek for geeks"
                           dc:date="2022-06-17"
                           dc:format="image/svg+xml"
                           dc:language="en"> 
                    </rdf:Description>
                </rdf:RDF>
            </metadata>
        </svg>
</body>
</html>

输出：

示例 2：在此示例中，我们创建了一个 blue-colored 矩形，我们在元数据标记中说明了该矩形，例如其标题、日期和发布者详细信息。

HTML


<!DOCTYPE html>
<html>
<head>
    <title>SVG <metadata > Element</title>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <metadata >Element</h3>
    <?xml version="1.0" standalone="yes"?>
        <svg width="400" height="110">
            <rect width="300"
                  height="100"
                  style=
    "fill:rgb(0,0,255); stroke-width:3;stroke:rgb(0,0,0)" />
            <metadata>
                <rdf:RDF xmlns:rdf=
    "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                         xmlns:rdfs=
    "http://www.w3.org/2000/01/rdf-schema#"
                         xmlns:dc=
    "http://purl.org/dc/elements/1.1/">
                    <rdf:Description about=
          "http://example.org/myfoo" dc:title="rectangle"
                           dc:description=
                           "A blue colored rectangle"
                           dc:publisher="geekforgeeks"
                           dc:date="2022-06-17"
                           dc:format="image/svg+xml"
                           dc:language="en"> 
                    </rdf:Description>
                </rdf:RDF>
            </metadata>
        </svg>
</body>
</html>

输出：

示例 3：在此示例中，我们可以看到我们可以将 <metadata> 与任何 SVG 元素一起使用，下面我们创建了一个文本，并在元数据中对其进行了说明。

HTML


<!DOCTYPE html>
<html>
<head>
    <title>SVG <metadata >Element</title>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <metadata >Element</h3>
    <?xml version="1.0" standalone="yes"?>
        <svg height="300" width="240">
            <text x="0" y="15" fill="green">
                GeeksforGeeks - Learning Together!
            </text>
            <metadata>
                <rdf:RDF xmlns:rdf=
    "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                         xmlns:rdfs=
    "http://www.w3.org/2000/01/rdf-schema#"
                         xmlns:dc=
    "http://purl.org/dc/elements/1.1/">
                    <rdf:Description about=
           "http://example.org/myfoo"
                       dc:title="text"
                       dc:description=
                       "geeksforgeeks-learning together"
                       dc:publisher="geek for geeks"
                       dc:date="2022-06-17"
                       dc:format="image/svg+xml"
                       dc:language="en"> </rdf:Description>
                </rdf:RDF>
            </metadata>
        </svg>
</body>
</html>

输出



相关用法


注：本文由纯净天空筛选整理自alphanumeric91大神的英文原创作品 SVG <metadata> Element。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。