SVG 标签

一、rect 矩形

属性

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度
• style 属性用来定义 CSS 属性
• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度
• CSS 的 stroke 属性定义矩形边框的颜色
• x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
• y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
• CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
• CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
• rx 和 ry 属性可使矩形产生圆角。

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<!-- 矩形 -->
    <rect x="82" y="82" width="250" height="50" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
    <!-- 矩形 透明度 -->
	<rect x="82" y="140" width="250" height="50" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
	<!-- 矩形 透明度 -->
	<rect x="82" y="200" width="250" height="50" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.3"/>
	<!-- 矩形 圆角 -->
	<rect x="82" y="260" rx="20" ry="20" width="250" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

二、circle 圆形

属性

• cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
• r 属性定义圆的半径。
• stroke圆形边框的颜色
• stroke-width圆形边框的宽度
• fill填充的颜色
• fill-opacity填充颜色的透明度
• stroke-opacity边框颜色的透明度
• opacity整个circle的透明度

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<!-- 圆形 -->
	<circle cx="100" cy="100" r="40" stroke="black" stroke-width="2" fill="red" />
	<!-- 圆形 -->
    <circle cx="100" cy="200" fill-opacity="0.1" stroke-opacity="0.1" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

三、ellipse 椭圆形

属性

• cx 属性定义圆点的 x 坐标
• cy 属性定义圆点的 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）

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<!-- 椭圆形 -->
	<ellipse cx="100" cy="50" rx="60" ry="20" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2;stroke-opacity:0.5;fill-opacity: 0.6;"/>
	<!-- 透明度 -->
	<ellipse cx="100" cy="100" rx="60" ry="20" style="fill:purple; opacity: 0.5;"/>
</svg>

四、line 线条

属性

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束
• stroke 线条颜色
• stroke-width 线条宽度
• stroke-opacity 透明度
• opacity 透明度

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<!-- line 线条 -->
	<line x1="10" y1="20" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2; stroke-opacity: 0.4;"/>	
	<!-- 透明度 -->
	<line x1="10" y1="30" x2="300" y2="310" style="stroke:rgb(99,99,99);stroke-width:2; opacity: 0.5;"/>	
</svg>

五、polygon 多边形

属性

• points 属性定义多边形每个角的 x 和 y 坐标
• 其余和上面一样

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<!-- 多边形 -->
	<polygon points="220,100 300,210 170,250, 400, 200" style="fill:#cccccc;stroke:#000000;stroke-width:1; fill-opacity: 0.6; stroke-opacity: 0.5;"/>	
	<!-- 透明度 -->
	<polygon points="220,300 300,410 170,450 123,434" style="fill:#cccccc;stroke:#000000;stroke-width:1; opacity: 0.6"/>
</svg>

六、polyline 折线

属性

• 和 polygon 多边形一样

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<!-- 折线 -->

	<polyline points=" 20,20 20,40 40,40 40,60 60, 60 60, 80" style="fill:white;stroke:red;stroke-width:2; stroke-opacity: 0.6; fill-opacity: 0.6;"/>
	<polyline points=" 120,120 120,140 140,140 140,160 160, 160 160, 180" style="fill:blue;stroke:red;stroke-width:2;opacity: 0.6;"/>
</svg>

七、path 路径

属性

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Belzier curve
• T = smooth quadratic Belzier curveto
• A = elliptical Arc
• Z = closepath

所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<!-- 路径 -->
	<path d="M250 100 L150 220 L350 220 Z" />
	<path d="M153 334
	C153 334 151 334 151 334
	C151 339 153 344 156 344
	C164 344 171 339 171 334
	C171 322 164 314 156 314
	C142 314 131 322 131 334
	C131 350 142 364 156 364
	C175 364 191 350 191 334
	C191 311 175 294 156 294
	C131 294 111 311 111 334
	C111 361 131 384 156 384
	C186 384 211 361 211 334
	C211 300 186 274 156 274"
	style="fill:white;stroke:red;stroke-width:2"/>
</svg>

八、text 文字标签

属性

• css fill 填充色
• css stroke 颜色
• css font-size 字体大小
• css opacity 整体透明度
• css stroke-opacity 透明度

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text x="50" y="25">Hello World</text>
  <text x="50" y="50" style="stroke: blue; font-size: 20px;">Hello World</text>
  <text x="50" y="75" style="fill: red;">Hello World</text>
  <text x="50" y="100" style="stroke: red; stroke-opacity: 0.2;">Hello World</text>
  <text x="50" y="125" style="stroke: red; opacity: 0.2;">Hello World</text>
</svg>

九、use 复制标签

属性

• href 复制的标签的节点
• x 相对于复制的标签的 x 值
• y 相对于复制的标签的 y 值

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text id="myText" x="50" y="125" style="stroke: red; opacity: 0.2;">Hello World</text>
  <use href="#myText" x="0" y="25" />
  <use href="#myText" x="20" y="50"/>
</svg>

十、标签

<g>标签用于将多个形状组成一个组（group），方便复用。

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<g id="myText">
		<text x="50" y="125" style="stroke: red; opacity: 0.2;">Hello World</text>
		<circle cx="20" cy="20" r="10" />
	</g>
  	<use href="#myText" x="0" y="25" />
</svg>

十一、defs 标签

标签用于自定义形状，它内部的代码不会显示，仅供引用。

示例

<svg width="100%" height="100%">
    <defs>
        <g id="myText" stroke="red">
            <text x="50" y="125" style="stroke: red; opacity: 0.2;">Hello World</text>
            <circle cx="20" cy="20" r="10" />
        </g>
    </defs>
    <use href="#myText" x="0" y="0" />
    <use href="#myText" x="150" y="0" />
</svg>

十二、pattern标签

<pattern>需要放在SVG文档的<defs>内部。

示例

<svg width="100%" height="800">
    <defs>
        <pattern id="myPattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
            <circle cx="20" cy="20" r="10" />
        </pattern>
    </defs>
    <rect x="0" y="150" width="100%" height="100" fill="url(#myPattern)" />
</svg>

<svg width="100%" height="800">
    <defs>
        <linearGradient id="Gradient1">
            <stop offset="5%" stop-color="white" />
            <stop offset="95%" stop-color="blue" />
        </linearGradient>
        <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
            <stop offset="5%" stop-color="red" />
            <stop offset="95%" stop-color="orange" />
        </linearGradient>
        <pattern id="Pattern" x="0" y="0" width=".25" height=".25" patternUnits="objectBoundingBox">
            <rect x="0" y="0" width="50" height="50" fill="skyblue" />
            <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)" />
            <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5" />
        </pattern>
    </defs>
    <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200" />
</svg>

十三、image标签

<image>标签用于插入图片文件。使用xlink:href 来引入图片

示例

<svg width="100%" height="800">
    <image xlink:href="https://img.alicdn.com/imgextra/i1/1881744325/O1CN01iNKEij1hotb5Di09F_!!1881744325.png" />
</svg>

十四、animate 标签

属性

• attributeName：发生动画效果的属性名。
• from：单次动画的初始值。
• to：单次动画的结束值。
• dur：单次动画的持续时间。
• repeatCount：动画的循环模式。

对 transform 不起作用

示例

<svg width="100%" height="800">
    <rect x="0" y="0" width="100" height="100" fill="#feac5e">
        <animate attributeName="x" from="0" to="200" dur="2s" repeatCount="indefinite" />
        <animate attributeName="width" to="200" dur="2s" repeatCount="indefinite" />
        <animate attributeName="y" to="200" dur="2s" repeatCount="indefinite" />
        <animate attributeName="height" to="200" dur="2s" repeatCount="indefinite" />
    </rect>
</svg>

十五、animateTransform标签

在使用 transform 属性的动画

示例

<svg width="100%" height="800">
    <rect x="10" y="100" width="10" height="10" transform="translate(30,40)">
        <animateTransform attributeName="transform"
          attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatCount="indefinite"/>
    </rect>
</svg>

十六、animateMotion标签

一个元素沿着运动路径进行移动。

示例

<svg width="100%" height="800">
    <circle r="5" fill="red">
        <animateMotion dur="10s" repeatCount="indefinite" path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
    </circle>
</svg>

十七、SVG转为canvas

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>svg</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    </style>
</head>
<body>
    <svg width="100%" height="800">
        <path d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
        <circle id="mycircle" r="5" fill="red">
            <animateMotion dur="10s" keyPoints="0;0.5;1" keyTimes="0;0.15;1" calcMode="linear" repeatCount="indefinite" path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
        </circle>
    </svg>
    <canvas id="canvas"></canvas>
</body>
<script>
// 获取 svg 代码
let svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
// 新建一个 img 标签
let img = new Image();
// 把 svg 代码转为 blob
let svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });

let DOMURL = self.URL || self.webkitURL || self;
// 转为URL
let url = DOMURL.createObjectURL(svg);

img.src = url;
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
img.onload = function() {
    // canvas 绘制
    ctx.drawImage(img, 0, 0);
};
</script>
</html>