SVG中的分组与引用对象

<g>元素

<svg xmlns="http://www.w3.org/2000/svg"
     width="240px" height="240px" viewBox="0 0 240 240">
    <title>Grouped Drawing</title>
    <desc>Stick-figure drawings of a house and people</desc>
    <g id="house" style="fill:none;stroke:black;">
        <desc>House with door</desc>
        <rect x="6" y="50" width="60" height="60"/>
        <polyline points="6 50, 36 9,66 50"/>
        <polyline points="36 110, 36 80, 50 80, 50 110"/>
    </g>
    <g id="man" style="fill:none;stroke:black;">
        <desc>Male human</desc>
        <circle cx="85" cy="56" r="10"/>
        <line x1="85" y1="66" x2="85" y2="80"/>
        <polyline points="76 104, 85 76, 94 104"/>
        <polyline points="76 70, 85 76, 94 70"/>
    </g>
    <g id="woman" style="fill:none;stroke:black;">
        <desc>Female human</desc>
        <circle cx="110" cy="56" r="10"/>
        <polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/>
        <line x1="104" y1="104" x2="108" y2="90"/>
        <line x1="112" y1="90" x2="116" y2="104"/>
        <polyline points="101 70, 110 76, 119 80"/>
    </g>
</svg>

<use>元素

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    width="240px" height="240px" viewBox="0 0 240 240">
    <title>Grouped Drawing</title>
    <desc>Stick-figure drawings of a house and people</desc>
    <g id="house" style="fill:none;stroke:black;">
        <desc>House with door</desc>
        <rect x="6" y="50" width="60" height="60"/>
        <polyline points="6 50, 36 9,66 50"/>
        <polyline points="36 110, 36 80, 50 80, 50 110"/>
    </g>
    <g id="man" style="fill:none;stroke:black;">
        <desc>Male human</desc>
        <circle cx="85" cy="56" r="10"/>
        <line x1="85" y1="66" x2="85" y2="80"/>
        <polyline points="76 104, 85 76, 94 104"/>
        <polyline points="76 70, 85 76, 94 70"/>
    </g>
    <g id="woman" style="fill:none;stroke:black;">
        <desc>Female human</desc>
        <circle cx="110" cy="56" r="10"/>
        <polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/>
        <line x1="104" y1="104" x2="108" y2="90"/>
        <line x1="112" y1="90" x2="116" y2="104"/>
        <polyline points="101 70, 110 76, 119 80"/>
    </g>

    <use xlink:href="#house" x="70" y="100"/>
    <use xlink:href="#woman" x="-80" y="100"/>
    <use xlink:href="#man" x="-30" y="100"/>
</svg>

<defs>元素

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    width="240px" height="240px" viewBox="0 0 240 240">
    <title>Grouped Drawing</title>
    <desc>Stick-figure drawings of a house and people</desc>
    <defs>
        <g id="house" style="stroke:black;">
            <desc>House with door</desc>
            <rect x="6" y="50" width="60" height="60"/>
            <polyline points="6 50, 36 9,66 50"/>
            <polyline points="36 110, 36 80, 50 80, 50 110"/>
        </g>
        <g id="man" style="fill:none;stroke:black;">
            <desc>Male human</desc>
            <circle cx="85" cy="56" r="10"/>
            <line x1="85" y1="66" x2="85" y2="80"/>
            <polyline points="76 104, 85 76, 94 104"/>
            <polyline points="76 70, 85 76, 94 70"/>
        </g>
        <g id="woman" style="fill:none;stroke:black;">
            <desc>Female human</desc>
            <circle cx="110" cy="56" r="10"/>
            <polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/>
            <line x1="104" y1="104" x2="108" y2="90"/>
            <line x1="112" y1="90" x2="116" y2="104"/>
            <polyline points="101 70, 110 76, 119 80"/>
        </g>
        <g id="couple">
            <desc>Male and female stick figures</desc>
            <use xlink:href="#man" x="0" y="0"/>
            <use xlink:href="#woman" x="0" y="0"/>
        </g>
    </defs>
    <!-- 利用组合定义 -->
    <use xlink:href="#house" x="0" y="0" style="fill:red;"/>
    <use xlink:href="#couple" x="70" y="40"/>

    <use xlink:href="#house" x="120" y="0" style="fill:#99f;"/>
    <use xlink:href="#couple" x="190" y="40"/>

    <use xlink:href="#house" x="65" y="105" style="fill:#c00;"/>
    <use xlink:href="#woman" x="0" y="145"/>
    <use xlink:href="#man" x="25" y="145"/>
</svg>

<symbol>元素

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    width="240px" height="240px" viewBox="0 0 240 240">
    <title>Grouped Drawing</title>
    <desc>Stick-figure drawings of a house and people</desc>
    <defs>
        <g id="octagon" style="stroke:black;">
            <desc>Octagon as group</desc>
            <polygon points="36 25,25 36,11 36,0 25,0 11,11 0,25 0,36 11"/>
        </g>
        <symbol id="sym-octagon" style="stroke:black;"
                preserveAspectRatio="xMidYMid slice" viewBox="0 0 40 40">
            <desc>Octagon as symbol</desc>
            <polygon points="36 25,25 36, 11 36,0 25,0 11,11 0,25 0,36 11"/>
        </symbol>
    </defs>
    <g style="fill:none;stroke:gray">
        <rect x="40" y="40" width="30" height="30"/>
        <rect x="80" y="40" width="40" height="60"/>
        <rect x="40" y="110" width="30" height="30"/>
        <rect x="80" y="110" width="40" height="60"/>
    </g>
    <use xlink:href="#octagon" x="40" y="40" width="30" height="30" style="fill:#c00;"/>
    <use xlink:href="#octagon" x="80" y="40" width="40" height="60" style="fill:#cc0;"/>
    <use xlink:href="#sym-octagon" x="40" y="110" width="30" height="30" style="fill:#cfc;"/>
    <use xlink:href="#sym-octagon" x="80" y="110" width="40" height="60" style="fill:#699;"/>
</svg>

<image>元素

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    width="240px" height="240px" viewBox="0 0 240 240">
    <ellipse cx="154" cy="154" rx="150" ry="120" style="fill:#999999;"/>
    <ellipse cx="152" cy="152" rx="150" ry="120" style="fill:#cceeff;"/>
    <image xlink:href="image.jpg" x="72" y="92" width="160" height="120"/>
</svg>