简单的SVG使用指南，主要使用了阮一峰的SVG教程
- circle - cx,cy,r
- line - x1,y1,x2,y2
- polyline - points
- rect - x,y,height,width
- ellipse - cx,cy,rx,ry
- polygon - points
- path - M,L,Z
- text - x,y
- use - 复制id的图形
- g - 成组，id复用
- def - 自定义形状
- pattern - 自定义填充图形
- image - xlink:href
- animate - attributeName, from, to, dur, repeatCount / animateTransform attributeName type begin dur...
- JS
插入网页
- 直接插入网页
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet">
</svg>
- SVG代码写在独立文件中，标签引用入网页
<img src="a.svg" />
<object data="b.svg" type="image/svg+xml"></object>
<embed src="c.svg" type="image/svg+xml">
<iframe src="d.svg"></iframe>
- CSS引用
.a {
background: url(e.svg);
}
- SVG转BASE64，作为Data URI写入
<img src="data:image/svg+xml;base64,[data]">
SVG
<svg width="100%" height="100%" viewBox="50 50 50 50">
width和height默认300x150
viewBox只展示图像的一部分，表示左上角x，y，宽，高
</svg>
circle圆形
分为标签和CSS
<svg>
<circle cx="100" cy="50" r="25" class="hh" />
</svg>
.hh {
fill: 填充
stroke: 描边色
stroke-width: 边框宽度
}
line直线
两点一线，biubiu
<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0); stroke-width:5" />
polyline折线
指定每个顶点的坐标，横纵坐标用逗号分隔，点点之间用空格分隔
<polyline points="3,3 30,28, 3,53" fill="none" stroke="black" />
rect矩形
<rect x="0" y="0" height="100" width="200" style="..." />
ellipse椭圆
cx和cy指定椭圆中心横纵坐标，rx和ry指定横向纵向轴半径。
<ellipse cx="60" cy="60" ry="40" rx="20" style="..." />
polygon多边形
和polyline类似
<polygon points="0,0 100,0 100,100 0,100 0,0" />
path路径
- M移动到
- L画直线到
- Z闭合路径
<path
M 18,3
L 46, 3
L 46, 40
Z></path>
text
<text x="30" y="30">ABC</text>
use
用来复制一个形状
<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
g成组
方便复用
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
def自定义形状
代码不会显示，仅供引用，就是说引用的时候才会用到，定义的时候不会显示
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>
<use href="#myCircle" x="0" y="0" />
pattern自定义填充形状
自定义形状，用来平铺一个区域，定义了一个圆，然后patternUnits="userSpaceOnUse"表示pattern的宽度和长度是实际的像素值，然后下面的引用填充。
<defs>
<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)" />
image图像
<image xlink:href="path/to/image.jpg"
width="50%" height="50%"/>
animate动画
定义一个图像，然后设置
attributeName 发生动画效果属性名
from, to, dur
repeatCount动画循环模式
<rect x="0" y="0" width="100" height="100" fill="#feac5e">
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" /
</rect>
animate对transform不起作用，要用就用
animateTransform
type是旋转
from="0 200 200"开始角度0，围绕200,200开始转
to="360 400 400"结束时角度360，围绕400,400开始转
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
<animateTransform
attributeName="transform" type="rotate"
begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
</rect>
JS
获取SVG DOM
P.s.使用img时无法获取SVG DOM
//用以下三种方式设置时
<object id="">
<iframe id="">
<embed id="" data>
var svgOBJ = d.gBId('').contentDocument;
var svgIframe = d.gBId('').contentDocument;
var svgEmbed = d.gBId('').getSVGDocument;
读取SVG源码，因为SVG本来就是XML
var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
SVG转Canvas
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;
img.onload = function() {
var canvas = d.gbid('');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
}
网友评论