svg

前端
html
作者

yangjh

发布日期

October 29, 2021

SVG是一种XML应用,用来表示矢量图形。所有的图形有关信息被存储为纯文本,具有XML的开放性、可移植性和可交互性。当前稳定的XML和SVG版本都为1.1。

在HTML中使用的方式

作为内容

SVG 文件可通过以下标签嵌入 HTML 文档:<embed><object> 或者 <iframe>。建议使用<iframe>

<iframe src="https://svgsilh.com/svg_v2/639149.svg" frameborder="0" width="200px"></iframe>

作为图片

<img src="https://svgsilh.com/svg_v2/639149.svg" alt="" width="200px">

作为元素

推荐直接使用直接嵌入到HTML页面中。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
    <rect width="200" height="200" fill="#ccc" />
</svg>

基本概念

坐标系

SVG使用的坐标系统或者说网格系统,这种坐标系统是:以页面的左上角为(0,0)坐标点,坐标以像素为单位,x轴正方向是向右,y轴正方向是向下。在HTML文档中,元素都是用这种方式定位的。

长度单位

基本上,在 SVG 文档中的1个像素对应输出设备(比如显示屏)上的1个像素。SVG也可以定义绝对大小,同时SVG也能使用相对大小,只需给出数字,不标明单位,输出时就会采用用户的单位。

用户坐标系统

用户单位和屏幕单位的映射关系被称为用户坐标系统。除了缩放之外,坐标系统还可以旋转、倾斜、翻转。

<svg width="200" height="200" viewBox="0 0 50 50">
    <rect x="10" y="5" width="20" height="20" fill="#cd0000"/>
</svg>

形状

线 <line>

  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="200" x2="200" y2="0"
  style="stroke:#ccc;stroke-width:1"/>
</svg>

矩形 <rect>

  • width 和 height 属性可定义矩形的高度和宽度
  • x 属性定义矩形的左侧位置
  • y 属性定义矩形的顶端位置
  • rx 和 ry 属性可使矩形产生圆角。
  • style 属性用来定义 CSS 属性
    • CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
    • CSS 的 stroke-width 属性定义矩形边框的宽度
    • CSS 的 stroke 属性定义矩形边框的颜色
    • CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
    • CSS 的 stroke-opacity 属性定义轮廓颜色的透明度(合法的范围是:0 - 1)
    • CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <rect x="50" y="50" width="100" height="100" style="fill:#ccc;stroke:black;stroke-width:1;opacity:0.5" />
</svg>

圆形 <circle>

  • cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)
  • r属性定义圆的半径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="1" fill="#ccc"/>
</svg>

椭圆 <ellipse>

  • CX属性定义的椭圆中心的x坐标
  • CY属性定义的椭圆中心的y坐标
  • RX属性定义的水平半径
  • RY属性定义的垂直半径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px">
  <ellipse cx="50" cy="50" rx="30" ry="20" style="fill:red"/>
</svg>

折线 <polyline>

使用points指定顶点。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:1" />
</svg>

多边形 <polygon>

points 用来指定多边形顶点坐标

<svg  height="200" width="200">
  <polygon points="100,10 200,190 100,200" style="fill:#ccc;stroke:black;stroke-width:1"/>
</svg>

路径 <path>

path可能是SVG中最常见的形状。你可以用path元素绘制矩形(直角矩形或者圆角矩形)、圆形、椭圆、折线形、多边形,以及一些其他的形状,例如贝塞尔曲线、2次曲线等曲线。

path元素的形状是通过属性d定义的,属性d的值是一个“命令+参数”的序列

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
    <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
</svg>

文本

  • dx,dy x和y方向的偏移。
  • x,y 对tspan进行绝对定位。
  • rotate 旋转字符,可以同时设置多个值,这些值会依次作用在tspan包裹的字母上。
  • baseline-shift 与dy属性设置上下标相比,这个属性更方便,当为super时,会上标。sub时为下标。仅仅在所在的tspan内有效。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="20" style="fill:black;">多行文字:
    <tspan x="10" y="45">第一行</tspan>
    <tspan x="10" y="70">第二行</tspan>
  </text>
</svg>

如果要使得文本沿着某条路径排列,则需要使用textPath元素。需要将文本放在textPath元素内部,然后使用textPath元素的xlink:href属性引用一个定义好的path元素。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
    </defs>
    <text x="10" y="100" style="fill:black;">
            <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
    </text>
</svg>

填充和边框

fill属性设置对象内部的颜色,stroke属性设置绘制对象的线条的颜色。你可以使用在HTML中的CSS颜色命名方案定义它们的颜色,比如说颜色名(像red这种)、rgb值(像rgb(255,0,0)这种)、十六进制值、rgba值,等等。

组合

元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外,g元素也可以用来定义复杂的对象,之后可以通过<use>元素来引用它们。

进阶

除了上述基础知识之外,还应该随着需求去深入了解滤镜、蒙版、动画、接口等等内容。

参考资料

  1. https://www.w3.org/TR/SVG2/
  2. http://tutorials.jenkov.com/svg/index.html
回到顶部