HTML5图形之SVG
<!-- svgDemo.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG</title>
<style>
svg{
border: 1px solid #ccc;
max-width:;
}
.fill{
fill: red;
}
.stroke{
stroke: lime;
}
.stroke-width{
stroke-width: 5px;
}
</style>
</head>
<body style="background-color: white">
<svg width="300" height="180">
<!-- 圆 cx: 横坐标 cy: 纵坐标 r: 半径 相对画布左上角-->
<circle cx="30" cy="60" r="15" />
<circle cx="90" cy="60" r="15" class="fill" />
<circle cx="150" cy="60" r="15" class="stroke stroke-width" />
</svg>
<svg width="300" height="180">
<!-- 椭圆 cx,cy 指定椭圆中心的横坐标和纵坐标 rx,ry 指定了椭圆横向轴和纵向轴的半径 -->
<ellipse cx="150" cy="90" rx="60" ry="40" class="stroke stroke-width fill" />
</svg>
<svg width="300" height="180">
<!-- 直线 x1,y1: 起点横纵坐标 x2,y2: 终点横纵坐标 -->
<line x1="0" y1="0" x2="280" y2="150" class="stroke stroke-width" />
</svg>
<svg width="300" height="180">
<!-- 折线： points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。 -->
<polyline points="0,0 30,60 100,50 200,110 300,180" class="stroke fill" />
</svg>
<svg width="300" height="180">
<!-- 矩形 x,y 指定矩形左上角的横纵坐标 width,height 指定矩形的宽高 -->
<rect x="30" y="80" width="200" height="20" class="stroke fill" />
</svg>
<svg width="300" height="180">
<!-- 多边形 points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。 -->
<polygon points="50,50 100,50 100,100 50,100 25,75" fill="green" stroke="orange" stroke-width="5" />
</svg>
<svg width="300" height="180">
<!-- 路径 d属性表示绘制顺序，每个字母表示一个绘制动作，后面跟着坐标。 -->
<!-- M：移动到（moveto） L：画直线到（lineto） Z：闭合路径 -->
<path d="
M 18,3
L 46,3
L 46,40
L 61,40
L 32,68
L 3,40
L 18,40
Z
"></path>
</svg>
<svg width="300" height="180">
<!-- 文本 x属性和y属性, 表示文本区块基线（baseline）起点的横坐标和纵坐标 -->
<text x="150" y="90">Hello World</text>
</svg>
<svg width="300" height="180">
<circle cx="30" cy="60" r="15" id="myCircle" />
<!-- use标签 复制形状, href属性指定所要复制的节点, x属性和y属性指定复制形状的左上角坐标 -->
<use href="#myCircle" x="150" y="90" />
</svg>
<svg width="300" height="180">
<!-- g标签 将多个形状组成一个组（group），方便复用。-->
<g id="myGroup">
<text x="25" y="20">下面是个圆</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myGroup" x="100" y="30" fill="blue" stroke="red" />
<use href="#myGroup" x="200" y="60" fill="green" stroke="deeppink" />
</svg>
<svg width="300" height="180">
<!-- def标签 自定义形状，内部代码不会显示，仅供引用(chrome中可以展开代码看到？)-->
<def>
<g id="myEllipse">
<text x="25" y="20">下面是个椭圆</text>
<ellipse cx="50" cy="50" rx="30" ry="20" />
</g>
</def>
<use href="#myEllipse" x="100" y="30" fill="blue" stroke="red" />
<use href="#myEllipse" x="200" y="60" fill="green" stroke="deeppink" />
</svg>
<svg width="300" height="180">
<!-- pattern标签 自定义形状，可以引用来平铺一个区域-->
<defs>
<!-- 将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。 -->
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="35"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"/>
</svg>
<svg width="300" height="180">
<!-- image标签 插入图片文件，xlink:href属性表示图像的来源。-->
<image href="./picture.jpg" x="50" y="50" width="150" height="150"/>
</svg>
<svg width="300" height="180">
<!-- animate标签 改变属性产生动画效果(注意这里rect不是单标签) -->
<!-- attributeName：发生动画效果的属性名。 from：单次动画的初始值。 to：单次动画的结束值。
dur：单次动画的持续时间。 repeatCount：动画的循环模式。 -->
<rect x="0" y="0" width="50" height="50" fill="red">
<animate attributeName="x" from="20" to="200" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="height" to="180" dur="2s" repeatCount="indefinite" />
</rect>
</svg>
<svg width="300" height="180">
<!-- animateTransform标签 animate标签对CSS的transform属性不起作用，如果需要变形，就要使用animateTransform标签。-->
<rect x="0" y="0" width="50" height="50" fill="green">
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="2s" from="0 50 40"
to="360 150 90" repeatCount="indefinite"/>
</rect>
</svg>
<div>
<!-- SVG 代码也可以写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页。 -->
<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="circle.svg" type="image/svg+xml">
<iframe id="iframe" src="circle.svg"></iframe>
</div>
<!-- SVG 图像转为Canvas图像 -->
<canvas></canvas>
</body>
<script>
//参考： http://www.ruanyifeng.com/blog/2018/08/svg.html
var img = new Image();
//如何代码转换出这个svgString？
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);
img.src = url;
img.onload = function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
};
</script>
</html>
<!-- circle.svg -->
<div id="svg-container">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" width="300" height="180"
>
<circle cx="150" cy="60" r="15" class="stroke stroke-width" />
</svg>
</div>
效果图：