欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

SVG 详解(四)其他常用标签

程序员文章站 2022-05-27 08:37:32
...

文章案例 => 传送门

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>

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>

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>

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>

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>

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 详解(四)其他常用标签

上一篇:SVG 详解(三)基础语法
下一篇:

相关标签: SVG