SVG 意为可缩放矢量图形（Scalable Vector Graphics)

  1. <?xml version="1.0" standalone="no"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  3. "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  5. <svg width="14px" height="14px" viewBox="1 1 18 18" xmlns="http://www.w3.org/2000/svg" version="1.1">
  6.   <circle cx="100" cy="50" r="40" stroke="black"
  7.   stroke-width="2" fill="red" />
  8. </svg>

01 Basic

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是”独立的”，或含有对外部文件的引用。
standalone=”no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

02 viewBox

viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素,

不允许宽度和高度为负值,0则禁用元素的呈现。
编组.png

  1. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  2.   <!--
  3.   with relative unit such as percentage, the visual size
  4.   of the square looks unchanged regardless of the viewBox
  5.   -->
  6.   <rect x="0" y="0" width="100%" height="100%"/>
  8.   <!--
  9.   with a large viewBox the circle looks small
  10.   as it is using user units for the r attribute:
  11.   4 resolved against 100 as set in the viewBox
  12.   -->
  13.   <circle cx="50%" cy="50%" r="4" fill="white"/>
  14. </svg>
  16. <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  17.   <!--
  18.   with relative unit such as percentage, the visual size
  19.   of the square looks unchanged regardless of the viewBox`
  20.   -->
  21.   <rect x="0" y="0" width="100%" height="100%"/>
  23.   <!--
  24.   with a small viewBox the circle looks large
  25.   as it is using user units for the r attribute:
  26.   4 resolved against 10 as set in the viewBox
  27.   -->
  28.   <circle cx="50%" cy="50%" r="4" fill="white"/>
  29. </svg>

SVG 代码以 元素开始，包括开启标签 和关闭标签 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 的 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身。

SVG有一些预定义的形状元素，可被开发者使用和操作：

  • 矩形
  • 圆形
  • 椭圆
  • 线
  • 折线
  • 多边形
  • 路径 
  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  2.   <rect width="300" height="100"
  3.   style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
  4. </svg>
  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
  • style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色
  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  2.   <rect x="50" y="20" width="150" height="150"
  3.   style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  4.   stroke-opacity:0.9"/>
  5. </svg>
  • x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px）
  • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
  • CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  2.   <rect x="50" y="20" width="150" height="150"
  3.   style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
  4. </svg>
  • CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  2.   <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  3.   style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
  4. </svg>
  • rx 和 ry 属性可使矩形产生圆角。
  1. <svg  height="210" width="500">
  2.   <polygon points="200,10 250,190 160,210"
  3.   style="fill:lime;stroke:purple;stroke-width:1"/>
  4. </svg>
  • points 属性定义多边形每个角的 x 和 y 坐标

03 SVGDOM_Element

在vue中的使用和在react中的使用；