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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。