svg
Posted bokeyanghao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了svg相关的知识，希望对你有一定的参考价值。
svg：矢量图
canvas：用于绘制位图
svg：使用xml格式绘制图形
svg：要有一个根节点，标签就相当于html
svg 命名空间 xmlns="http://www.w3.org/2000/svg" 版本 version="1.1"
svg如果不设置大小，默认占用位置 300x150
定义矩形：rect标签，必填的两个属性 width height
rect的属性：
width：宽
height：高
x：x轴坐标；
y：y轴坐标；
rx：边框圆角；
style="fill;red"：样式属性
fill：填充颜色
stroke-width：边框宽度
stroke：边框颜色
fill-opacity：填充透明度
stroke-opacity：边框透明度；
opacity：同时定义填充和边框的透明度
定义圆：circle标签
属性：
cx：定义x轴坐标
cy：定义y轴坐标
r：半径
style="fill;red"：样式属性
fill：填充颜色
stroke-width：边框宽度
stroke：边框颜色
fill-opacity：填充透明度
stroke-opacity：边框透明度；
opacity：同时定义填充和边框的透明度
定义椭圆：ellipse标签
属性：
cx：定义x轴坐标；
cy：定义y轴坐标；
rx：定义x轴半径；
ry：定义y轴半径；
style="fill;red"：样式属性
fill：填充颜色
stroke-width：边框宽度
stroke：边框颜色
fill-opacity：填充透明度
stroke-opacity：边框透明度；
opacity：同时定义填充和边框的透明度
绘制直线的标签：line
属性：
x1：起始坐标 x 轴
y1：起始坐标 y 轴
x2：结束坐标 x 轴
y2：结束坐标 y 轴
定义多边形：polygon标签
属性：
points：用于定义写多边形角的坐标，
案例：points="20,12 50,45 30,60"
fill-rule：奇偶判断；
折线：polyline标签：由直线绘制路径
属性：
points：同polygon标签；
路径：path，分大小写，大写代表绝对 ，小写代表相对；
属性：
d：多个属性的集合
M：代表起始点 moveTo
L：代表领点 lineTo
Z：代表 closePath；构成一个闭合回路
案例：d="M100,30 L200,20 Z";
H：代表水平划线（默认与y轴上面的值一致）
v：代表垂直线条（默认与x轴上面的值一致）
A：用于划曲线 x 代表半径 y 代表半径 0 代表角度（0代表圆） 弧长（0代表小狐长，1代表大弧长），方向（0代表逆时针，1代表顺时针），终点的x坐标，终点的y坐标；
案例：<path d="M30,30 A25,75,90,1,1,80,80 " stroke="red"></path> 椭圆案例
<path d="M30,30 A25,25,0,0,0,80,80" stroke="red"></path> 半圆案例
transform属性：svg中的一个属性，translate 代表平移 ，rotate 代表旋转 ，scale 代表缩放
transform属性：平移，旋转都是以起点0，0（svg的左上角）为参考点，而css3中以元素的中心点为参考点；
text标签：定义文本：x，y的值在字体左上角，text-anchor="middle" 让字体居中
g标签：用于相关元素的一个组合；
g身上的属性，子元素都会被继承，g上的属性必须是显现属性，不能是svg私有的 ，比如 g 上的圆心坐标不行；
image标签：绘制图片
x：x轴坐标
y：y轴坐标
width：宽
height：高
xlink:href="图片路径"
use标签：复制一个
x属性和y属性：相对于被克隆的坐标位置 不是相对于svg的0，0点的坐标
xlink:href属性：复制标签的锚点；
案例：
<text x="60" y="30" text-anchor="middle" stroke="red" id="a">hello world</text>
<use x="2" y="2" xlink:href="#a"></use>
animate标签：动画
attributeName：目标属性名称；
from="" to="" : 从哪到哪；
dur：持续时间
repeatCount="indefinite" 动画的无限次播放
注意事项：写在需要动画元素的中间
案例：
<rect x="60" y="50" width="50" height="50" fill="red">
<animate attributeName="width" from="50" to="200" dur="2" repeatCount="indefinite"></animate>
</rect>
以上是关于svg的主要内容，如果未能解决你的问题，请参考以下文章