HTML5如何使用SVG的方法示例

2020-04-25 07:54:16易采站长站整理
标签用于复制一个形状。


<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4"/>

<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>

<use>
的href属性指定所要复制的节点,x属性和y属性是
<use>
左上角的坐标。另外,还可以指定width和height坐标。

11.

<g>
标签

<g>
标签用于将多个形状组成一个组(group),方便复用。


<svg width="300" height="100">
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>

<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

12.

<defs>
标签

<defs>
标签用于自定义形状,它内部的代码不会显示,仅供引用。


<svg width="300" height="100">
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>

<use href="#myCircle" x="0" y="0" />
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

13.

<pattern>
标签

<pattern>
标签用于自定义一个形状,该形状可以被引用来平铺一个区域。


<svg width="500" height="500">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="35" />
</pattern>