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 详解（三）基础语法
下一篇：