预定义的形状

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

矩形
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
- style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
- CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
- x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px）
- y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px）
- CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
- rx 和 ry 属性可使矩形产生圆角。
圆形
- cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
- r 属性定义圆的半径。

椭圆
- cx 属性定义圆点的 x 坐标
- cy 属性定义圆点的 y 坐标
- rx 属性定义水平半径
- ry 属性定义垂直半径
线
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
折线
- points 属性定义多边形每个角的 x 和 y 坐标
多边形
- points 属性定义多边形每个角的 x 和 y 坐标
路径

元素的形状是通过属性d定义的, 属性d的值是一个“命令+参数”的序列, d表示路径,相关参数如下
- M = moveto 移动到 🌰:M10 10 移动到(10,10)的位置
  
  M x y或m dx dy
- L = lineto 划线至在当前位置到(x,y)间划线,并移动到(x,y)
  
  L x y 或 l dx dy
- H = horizontal lineto 水平线, 水平移动到x
  
  H x 或 h dx
- V = vertical lineto 垂直线, 垂直移动到y
  
  V y 或 v dy
- C = curveto 曲线最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。
  
  C x1 y1, x2 y2, x y 或 c dx1 dy1, dx2 dy2, dx dy
- S = smooth curveto 光滑的曲线
- Q = quadratic Belzier curve 二次贝塞尔曲线
- T = smooth quadratic Belzier curveto 平滑的二次贝塞尔曲线
- A = elliptical Arc 椭圆弧
- Z = closepath 结束
🌰:
1
2
3
4
5
6
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths

DOM操作
svg代码直接写在HTML网页之中, 它就成为网页DOM的一部分, 可以直接用像操作普通DOM一样操作svg: 以用CSS定制样式,可以用JavaScript代码操作SVG文件

JavaScript代码操作
获取SVG DOM

直接通过document.getElementById获取svg元素

添加修改属性

直接使用setAttribute添加属性

将svg图像转为canvas图像

新建一个图片, 将svg图像指定到该Image对象的src属性。
1
2
3
4
5
6
7
var img = new Image();
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;
然后，当图像加载完成后，再将它绘制到<canvas>元素。
1
2
3
4
5
img.onload = function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
};

预定义的形状

DOM操作

JavaScript代码操作