svg defs标签

SVG 允许我们定义以后需要重复使用的图形元素。 在defs元素中定义的图形元素不会直接呈现。 你可以在你的视口的任意地方利用 <use>元素呈现这些元素。

例：

<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">

<defs>

<path id="gentle-wave"

d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>

</defs>

<g class="parallax">

<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"></use>

<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use>

<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use>

<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use>

</g>

</svg>

defs： 被引用元素的容器                           g： group缩写 无实意

use: 使用url引用 defs 中的图形                  xlink:href=“要克隆元素的 #ID” 

x=“克隆元素的左上角的x轴”                        y=“克隆元素的左上角的y轴”

width=“克隆元素的宽度”                              height=“克隆元素的高度”

fill=“图形的填充颜色”