svg | web

# svg

SVG 是一种文本格式。每个 SVG 图形都是使用与 HTML 类似的标记定义的，而且SVG 代码可以直接包含在 HTML 文档中，或者动态插入到 DOM 中。除IE8及之前版本之外，所有浏览器都支持 SVG。SVG 也是一种 XML 语言，所以那些不包含结束标签的元素，一定要 自关闭 。

<svg width="50" height="50">
	<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
</svg>

<svg width="500" height="50"></svg>

在 svg 标签中可以嵌入很多可见的元素，包括 rect 、 circle 、 ellipse 、 line 、text 和 path 。

基于像素的坐标系统的原点（即 0,0 点）位于画布的左上角。增大 x 的值，图形会向右移动；增大 y 值，图形会向下移动

<rect x="0" y="0" width="500" height="50"/>

rect 用于绘制矩形。 x 和 y 用于指定矩形左上角的坐标

(rx:对于圆角矩形，指定椭圆在x方向的半径) (ry:对于圆角矩形，指定椭圆在y方向的半径)

<svg >
		<circle cx="250" cy="25" r="25"/>
</svg>

circle 用于绘制圆形。 cx 和 cy 用于指定圆心坐标，而 r 用于指定半径 cx （center-x，即圆心 x 坐标）

<svg width="100%">
		<ellipse cx="250" cy="25" rx="100" ry="25"/>
</svg>

ellipse 与 circle 类似，只不过每个轴要分别指定半径。因此，半径属性不再是r ，而是 rx 和 ry

<svg width="100%">
		<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
</svg>

line 用于绘制直线。 x1 和 y1 用于指定起点坐标， x2 和 y2 用于指定终点坐标。另外，必须用 stroke 指定直线的颜色才能看得见。

# 文本

<svg width="100%">
		<text x="250" y="25">Easy-peasy</text>
</svg>

x x坐标
y y坐标
dx 相对于当前位置x方向上平移的距离
dy 相对于当前位置y方向上平移的距离
textLength 文字显示长度(不做拉长足则压缩)
rotate 旋转角度 text 用于绘制文本。如果某些还有其他样式可在text里加tspan

# 为svg元素添加样式

fill 颜色值与使用 CSS 一样
stroke 颜色值
stroke-width 带单位的数值 stroke的宽度
opacity

<svg width="100%">
		<rect x="0" y="0" width="30" height="30" fill="purple"/>
		<rect x="20" y="5" width="30" height="30" fill="blue"/>
		<rect x="40" y="10" width="30" height="30" fill="green"/>
		<rect x="60" y="15" width="30" height="30" fill="yellow"/>
		<rect x="80" y="20" width="30" height="30" fill="red"/>
</svg>

<svg width="100%">
		<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
		stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
		<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)"
		stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>
		<circle cx="125" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)"
		stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>
</svg>

# 多边形和折线 polygon polyline

<svg width="100%" height="300">
	<polygon points="100,20 20,90 60,160" style="fill:orange;stroke:black;"/>
	<polyline points="100,20 20,90 60,160" style="fill:white;stroke:black;" transform="translate(200,0)"/>
</svg>

# 路径path

属性d实际上是一个字符串，包含了一系列路径描述。这些路径由下面这些指令组成：

M=moveto 指定坐标
L=lineto 画直线到指定坐标
H=horizontal lineto 画水平折线到指定坐标
V=vertical lineto 画垂直直线到指定坐标

<svg width="100%" height="300">
	<path d="M30,100 L270,300
			 M30,100 H300
			 M30,100 V300"
		style="stroke:black;stroke-width: 1;" 
			/>
</svg>

C=curveto 画三次贝塞尔曲线经两个指定控制点到达终点坐标
S=shorthand/smooth curveto 与前一条三次贝塞尔曲线相连，第一个控制点为前一条曲线第二个控制点的对称点，只需要输入第二个控制点和终点，即可绘制一个三次贝塞尔曲线

这些属性大小写皆可，大写绝对定位，小写相对定位

<svg width="100%" height="300">
	<path d="M30,100 C100,20 190,20 270,100 
		S400,180 450,100"
		style="fill:white;stroke:black"
		/>
</svg>

Q 画二次贝塞尔曲线
T 与S类似，只不过是和二次贝塞尔曲线一起使用

<svg width="100%" height="300">
	<path d="M30,100 Q190,20 270,100 
		T450,100"
		style="fill:white;stroke:black"
		/>
</svg>

A 弧线 Z闭合 A(rx,ry ,x-axis-rotation,large-arc-flag,sweep-flag,x,y)
rx 椭圆x方向半轴大小
ry 椭圆y方向半轴大小
x-axis-rotation 椭圆x轴与水平轴顺时针方向夹角
large-arc-flag 有两个值(1 大角度弧线 0 小角度弧线)
sweep-flag(1 顺时针到终点 0逆时针到终点)
x 终点x坐标
y 终点y坐标

<svg width="100%" height="400">
	<path d="M100,200 a200 150 0 1 0 150 -150 Z"
		style="fill:orange;stroke:black"
		/>
</svg>

小写的a代表相对坐标，起始位置(100,200) 终点位置(100+150,200-150)==>(250,50);它包含弧线的椭圆的x和y方向半径分别为200和150，椭圆x轴和水平方向夹角0度，采用大角度，逆时针方向走向终点，Z表示闭合回路

# 标记

标记，最典型的是给线段添加箭头，标记<marker>写在<defs></defs>中,defs用于定义可重复利用的图形元素

viewBox 坐标系的区域
refX refY 在vuewbox内的基准点，绘制是此点在直线断点上
markerUnits 标记大小的基准有markerWidth markerHeight两个值
orient 绘制方向，可为auto或角度值
id 标识
marker-start 路径起点处
marker-mid 路径中间点
marker-end 结束点

<svg width="100%" height="400">
	<defs>
		<marker id="arrow" 
			markerUnits="strokeWidth"
			markerWidth="40"
			markerHeight="12"
			viewBox="0 0 12 12"
			refX="6"
			refY="6"
			orient="auto"
		>
		<path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000000"/>
		</marker>
	</defs>
	
	<line x1="0" y1="0" x2="200" y2="50" 
		stroke="red" 
		stroke-width="2" 
		marker-end="url(#arrow)"
	>
	</line>
	<path d="M20,70 T80,100 T160,80 T200,90" 
		fill="white" stroke="green" stroke-width="2"
		marker-start="url(#arrow)"
		marker-mid="url(#arrow)"
		marker-end="url(#arrow)"
	/>
</svg>

# svg转换

VG转换支持移动，缩放，旋转和倾斜

移动

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
	  <style>
		  .ass{
			  transform: translate(60px,30px);
		  }
		  
		  #s1{
			  width:300px;
			  height:300px;
			  background:palegreen
		  }
	  </style>
   </head>
	
   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20"
            width = "60"
            height = "60"
            fill = "green"
			class="ass"
			transform="translate(90 30)"
            >
         </rect>
      </svg>
	  <div id="s1" >
	  	2233
	  </div>
   </body>
</html>

transform="translate(90 30)和 transform: translate(60px,30px);

svg和htmltransform的差别

SVG元素和HTML元素工作方式的差异，主要是由元素 坐标系 的不同造成的。无论是HTML元素还是SVG元素，都有一个自己的坐标系。对于HTML元素，初始的坐标原点在元素的中心。对于SVG元素，其坐标系原点是在SVG画板的（0，0）处（假设在SVG标签内祖先元素和自身都不存在任何变换）。如果SVG元素的中心点不在画板的(0,0)点，像rotate,scale或者skew这些变换的结果，都会与HTML元素上应用的结果大不一样。

svg 中的<g>元素用来组织svg元素。如果一组svg元素被g元素包裹了，你可以通过对g元素进行变换（transform），被g元素包裹的元素也将被变换，就好这些被svg包裹的元素是一个元素一样，和<svg>相比这是一个很好的优势，嵌套的svg中元素是不会被变换影响的。

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <g transform = "translate(60,60) rotate(30)">
            <rect x = "20" 
               y = "20" 
               width = "60" 
               height = "30" 
               fill = "green">
            </rect>
            <circle cx = "0" 
               cy = "0" 
               r = "30" 
               fill = "red"/>
         </g>
      </svg>
   </body>
</html>

除了手动操作svg,也可以借助js操作，或者第三方js库如d3js等.

← svg path →