SVG的<defs>
元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组,并用<defs>
元素来定义它,然后你就可以在SVG图像中将它当做简单图形来重复使用。看下面的例子:
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <g> <rect x="100" y="100" width="100" height="100" /> <circle cx="100" cy="100" r="100" /> </g> </defs> </svg>
在<defs>
元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用<use>
元素来引入它们。如下面的代码所示:
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <g id="shape"> <rect x="50" y="50" width="50" height="50" /> <circle cx="50" cy="50" r="50" /> </g> </defs> <use xlink:href="#shape" x="50" y="50" /> <use xlink:href="#shape" x="200" y="50" /> </svg>
要引用<g>
元素,必须在<g>
元素上设置一个ID,通过ID来引用它。<use>
元素通过xlink:href
属性来引入<g>
元素。注意在ID前面要添加一个#
。
在<use>
元素中,通过x
和y
属性来指定重用图形的显示位置。注意在<g>
元素中的图形的定位点都是0,0
,在使用<use>
元素来引用它的时候,它的定位点被转换为<use>
元素x
和y
属性指定的位置。
下面是上面代码的返回结果:
上面SVG图像中绿色的圆点并不是示例代码的一部分。它们是用来显示2个<use>
元素的x
和y
坐标的。
哪些元素可以被定义为defs中的元素呢?
你可以将下面的元素放入到<defs>
元素中使用:
任何图形元素,如:
rect
,line
等g
symbol
SVG symbol元素
SVG <symbol>
元素用于定义可重复使用的符号。嵌入在<symbol>
元素中的图形是不会被直接显示的,除非你使用<use>
元素来引用它。
下面是一个使用<symbol>
元素的简单例子:
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100"> <symbol id="shape2"> <circle cx="25" cy="25" r="25" style="fill:#bf55ec;"/> </symbol> <use xlink:href="#shape2" x="50" y="25" /> </svg>
<symbol>
元素需要一个ID号,以便以被<use>
元素引用。
一个<symbol>
元素可以有preserveAspectRatio
和viewBox
属性。而<g>
元素不能拥有这些属性。因此相比于在<defs>
元素中使用<g>
的方式来复用图形,使用<symbol>
元素也许是一个更好的选择。
SVG use元素
SVG <use>
元素可以在SVG图像中多次重用一个预定义的SVG图形,包括<g>
元素和<symbol>
元素。被重用的图形可以在定义<defs>
的内部(图形将不可见直到使用use来引用它)或外部。
下面是一个使用<use>
元素的例子:
<svg> <defs> <g id="shape"> <rect x="50" y="50" width="50" height="50" /> <circle cx="50" cy="50" r="50" /> </g> </defs> <use xlink:href="#shape" x="50" y="50" /> <use xlink:href="#shape" x="200" y="50" /> </svg>
上面的例子显示的是在<defs>
元素中定义的<g>
元素。
要引用<g>
元素,必须给它一个ID号,通过ID号来引用它。
下面是上面代码的返回结果:
我们也可以引用不在<defs>
元素中的图形。<use>
元素可以引用SCG图像中的任何元素,只要这个元素有一个唯一的ID号,例如:
<svg width="500" height="110"> <g id="shape2"> <rect x="0" y="0" width="50" height="50" /> </g> <use xlink:href="#shape2" x="200" y="50" /> </svg>
这个例子在<g>
元素中定义了一个<rect>
元素。然后通过<use>
元素来引用这个<g>
元素。它返回的结果如下面所示:
注意这里原始图形和复用的图形都会被显示。因为原始的图形并没有定义在<defs>
或<symbol>
元素中。所以它是可见的。
你可以为引用的图形设置CSS样式。你可以在<use>
元素中使用style
属性来为复用的图形设置它的样式。例如:
<svg width="500" height="110"> <g id="shape3"> <rect x="0" y="0" width="50" height="50" /> </g> <use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/> <use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/> </svg>
注意上面的代码中,原始的图形并没有设置样式,它将是默认的样式(黑色)。
返回SVG教程目录
相关阅读:
网友评论文明上网理性发言 已有0人参与
发表评论: