SVG 详解（四）其他常用标签

文章案例 => 传送门

clipPath-裁剪

能限制哪些地方可见，哪些地方不可见。标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来)。剪切路径是用clipPath元素定义的，属性clip-path可用来引用剪切路径。默认情况下，一个形状，其被剪切掉的区域（不可见的区域）是不响应鼠标事件的。

// 超出矩形区域将不会被绘制
<svg width="120" height="120"viewPort="0 0 120 120" version="1.1"xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="myClip"><circle cx="30" cy="30" r="20"/><circle cx="100" cy="70" r="30"/></clipPath></defs><rect x="10" y="10" width="100" height="100"clip-path="url(#myClip)" fill='red' /></svg>

g-分组

g 标记就是’group’的简写，是用来分组用的，它能把多个元素放在一组里，对 g 标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承 g 标记上的所有属性。用定义的分组还可以使用 use 进行复制使用。

<svg width="200" height="100" viewBox="0 0 200 100"><g fill="blue" id="myClip"><circle cx="30" cy="30" r="20"/><circle cx="100" cy="70" r="30"/></g>
</svg>

use-深度复用

use 标记的作用是能从 SVG 文档内部取出一个节点，克隆它，并把它输出到别处。跟’引用’很相似，但它是深度克隆。

<svg width="200" height="200" viewBox='0 0 60 60'><style>.classA { fill:red }</style><defs><g id="Port"><circle style="fill:inherit" r="5"/></g></defs><use x="20" y="10" xlink:href="#Port" /><use x="20" y="30" xlink:href="#Port" class="classA"/><use x="20" y="50" xlink:href="#Port" style="fill:blue"/>
</svg>

defs-模板

defs 元素用于预定义一个元素使其能够在 SVG 图像中重复使用，和 g 结合使用。

<svg width="300" height="300" viewport="0 0 300 300"><defs><g id="shape"><rect x="25" y="50" width="50" height="50" /><circle cx="25" cy="50" r="50" /><circle fill="orange" cx="25" cy="50" r="5" /></g></defs><use xlink:href="#shape" x="50" y="25" /><use xlink:href="#shape" x="200" y="25" /><use xlink:href="#shape" x="50" y="150" />
</svg>

symbol-模板

symbol 标记的作用是定义一个图像模板，它的作用相当于 g 和 defs 的结合，你可以使用 use 标记实例化它，然后在 SVG 文档中反复使用，这种用法非常的高效。symbol 本身不会输出任何图像，只有使用 use 实例化后才会显示。。

<svg viewBox="0 0 150 150" height='300'><symbol id="sym01" viewBox="0 0 150 110"><circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/><circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/></symbol><use xlink:href="#sym01"x="0" y="0" width="100" height="50"/><use xlink:href="#sym01"x="0" y="50" width="75" height="38"/><use xlink:href="#sym01"x="0" y="100" width="50" height="25"/>
</svg>

文本

text 元素用于定义文本

<svg width="200" height="400"><!-- y 设置为 0 是看不到的 --><text x="10" y="1" fill="red">hello world !</text><text x="10" y="25" fill="blue">hello world !</text><!-- 旋转文本 --><text x="0" y="45" fill="red"
transform="rotate(30 20,40)">hello world !</text><!-- 文本组 --><text x="10" y="105" style="fill:red;">这里有几行文字：<tspan x="10" y="125">这是第一行文字。</tspan><tspan x="10" y="145">第二行文字在这里。</tspan></text><!-- 加超链接 --><a xlink:href="http://lwpersonal.cn/other/draw/Canvas/SVG.html"
target="_blank"><text x="10" y="170" fill="orange">超链接 !</text></a><!-- 按路径渲染文本 --><defs><path id="path1" d="M10,190 a1,1 0 0,0 100,0" /></defs><text x="10" y="190" style="fill:red;"><textPath xlink:href="#path1">I love SVG I love SVG</textPath></text><!-- x 的值定义距离上一个文本的 x 的绝对距离，dx 定义相对距离 --><text x="10 30 50" dx="-10 0 20" y="280 300 280" fill="red">hello world !</text><!-- 定义每一个文本的距离 --><text x="10" y="330" letter-spacing="10" fill="red">hello world !</text><!-- 定义文本相对于 x 坐标的处理方法 --><text x="100" y="360" text-anchor="middle" fill="red">hello world !</text><text x="100" y="390" text-anchor="end" fill="red">hello world !</text>
</svg>

上一篇：SVG 详解（三）基础语法
下一篇：