走进 SVG之图像编程第一章

SVG有多种方式引入到Html中

图片引入

<img src="xx.svg">

css背景引用

<div style="background:url(./xx.svg.png)"></div>

svg标签输出

<svg xhml="http://www.w3cshoool.org/2000/svg"></svg>

使用<object>标签

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />复制代码

svg的图形标签

<rect />             矩形

<circle />         圆形

<ellipse />        椭圆

<line/>              直线

<polyline />       折线

<polygon />        多边形

<path />             定义路径

SVG标签的基本属性

fill:rgb  填充颜色

stroke:rgb  线条颜色

stroke-width:number  线条粗细

transfrom:  动画属性

操作API

document.createElementNS(svg空间地址,SVG标签名)   动态创建图形

element.setAttribute(name,value)    设置属性

element.setAttribute(name)       获取属性值

转载于:https://juejin.im/post/5bcd5c6ce51d457a836ea6fa