SVG DEFS元素
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