SVG提供了一些元素,允许我们对元素进行分组,从而使得文档更加结构化、模块化。

<g>元素

<g>元素会将其所有子元素作为一个组合,通常组合还会有一个唯一的id作为名称。在程序中类似于“层”的概念,一个层就是一些相关对象构成的组合。每个组合还可以拥有自己的<title><desc>来供文本的XML应用程序识别,或者为用户提供更好的可访问性。

<g>标签中定义的所有样式会应用于组合中的所有子元素。而且组合间可以相互嵌套。

栗子:

<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
    <g id="house" style="fill: none; stroke: black">
        <desc>House</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="male" style="fill: none; stroke: black">
        <desc>male</desc>
        <circle cx="85" cy="56" r="10" />
        <line x1="85" y1="66" x2="85" y2="80" />
        <polyline points="76 104, 85 80, 94 104" />
        <polyline points="76 70, 85 76, 94 70" />
    </g>
    <g id="female" style="fill: none; stroke: black">
        <desc>female</desc>
        <circle cx="110" cy="56" r="10" />
        <line x1="85" y1="66" x2="85" y2="80" />
        <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 70" />
    </g>
</svg>

<use>元素

<use>元素为定义在<g>元素内的组合或者任意独立图形元素提供了类似复制粘贴的功能。

想通过<use>元素重用图形组合,则需要给xlink:href属性指定URI即可,同时还要指定x和y的位置,以表示组合的(0, 0)应该移动到的位置。

栗子:

<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
    <g id="house" style="fill: none; stroke: black">
        <desc>House</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="male" style="fill: none; stroke: black">
        <desc>male</desc>
        <circle cx="85" cy="56" r="10" />
        <line x1="85" y1="66" x2="85" y2="80" />
        <polyline points="76 104, 85 80, 94 104" />
        <polyline points="76 70, 85 76, 94 70" />
    </g>
    <g id="female" style="fill: none; stroke: black">
        <desc>female</desc>
        <circle cx="110" cy="56" r="10" />
        <line x1="85" y1="66" x2="85" y2="80" />
        <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 70" />
    </g>

    <use xlink:href="#house" x="70" y="100" />
    <use xlink:href="#female" x="-90" y="100" />
    <use xlink:href="#male" x="-30" y="100" />
</svg>

<defs>元素

<defs>元素里面的元素只定义,但不显示。

SVG规范推荐我们将所有想要复用的对象放置在<defs>元素内,作为“模板”供其他地方使用。

<symbol>元素

<symbol>元素提供了另一种组合元素的方式,和<g>元素不同的是,<symbol>元素永远不会显示,因此我们无需将其放在<defs>元素内。

<symbol>元素中,还可以指定viewBox和preserveAspectRatio属性。通过给<use>添加width和height属性,就可以让<symbol>适配视口大小。

<image>元素

<image>元素可以包含一个完整的SVG或栅格文件。

如果图像文件的尺寸与元素的宽度和高度不匹配,<image>元素可以使用preserveAspectRatio属性指定图像的适配方式。

栗子:

<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
    <image xlink:href="https://www.baidu.com/img/bd_logo1.png" x="72" y="92" width="160" height="120" />
</svg>

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/svg/803