svg
canvas和svg区别
canvas:
- Canvas 是H5新标签是画布.利用JavaScript在网页上绘制图像.Canvas逐像素渲染，色彩丰富，缩放失真.
- 修改图形 整个画布需要重绘
svg:
- 可缩放矢量图形(缩放后不会失真的图片格式 Scalable Vector Graphics)
- svg是通过DOM操作显示，svg每个图形都是单独的节点，方便修改样式.
svg
version:svg 遵循规范的版本号 1.0 1.1两个版本 xmlns:定义svg命名规范. x y表示开始坐标 width和height表示矩形的宽度和高度 填充颜色之前没有设置填充颜色 默认是黑色 fill设置填充颜色
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="30" y="30" width="100" height="100" fill="pink" class="r"/> </svg> svg路径
M:moveTo 移动到坐标点 L:lineTo:画线到坐标点 Z:close闭合 stork:线的颜色 stork-width:线的宽度
<path d="M75,20 L100,100,L400,150,Z" fill="pink" stroke="yellow" stroke-width="10"> </path> // 大写是绝对定位 小写是相对定位的 与上一个坐标相比 <path d="M75,20 l50,0,L50,10 Z" fill="" stroke="green" stroke-width=""> </path> 圆 cx和cy圆心的定义x y坐标 r代表半径
<circle cx="100" cy="50" r="40" fill="" stroke="green" stroke-width="10"> 参数分别代表开始坐标 最大半径和最小半径 旋转角度 大小角弧(1，0) 顺时针(1，0) 结束的坐标 x y
<path d="M120,120 A60 60 0 1 1 121 121 Z" fill="" stroke="pink" stroke-width="20"> </path> svg渐变
id是渐变色的唯一名称 x1 y1 x2 y2设置渐变方向
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="yellow" stop-opacity=""/>
<stop offset="33%" stop-color="blue" stop-opacity=""/>
<stop offset="66%" stop-color="green" stop-opacity=""/>
<stop offset="100%" stop-color="pink" stop-opacity=""/>
</linearGradient>
</defs>
// fill设置填充颜色 id是渐变色的名称
<rect x="10" y="10" width="200" height="200" fill="url(#grad)" style=""/>
svg动画
svg动画由于某些场景不能用,只需要简单了解即可. 跟css动画很像 attriName:变形 type:选择动画操作方式 这里是旋转 form:从哪里开始 to:从哪里结束 dur:动画执行时间 repeatCount:动画重复次数
<g>
<text x="150" y="100" style="">吃饭 睡觉 </text>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0"
to="100"
dur="250ms"
repeatCount="indefinite"/>
</g>
svg文字
定义一个路线 path id作为文字执行路线的名称 根据id选择文字根据哪条路线样式
<defs>
<path d="M0 50 l100 100 l100 -100 Z " id="p1"/>
<path d="M0 50 l100 100 l100 -100 Z " id="p2"/>
</defs>
<text x="" y="" style="">
<textPath xlink:href="#p1">
陶大花 胖琳 可真是个可人啊一群老六
</textPath>
</text>