前端提高篇(七十)：SVG基本使用、基本样式、路径path

SVG 是使用 XML 来描述二维图形和绘图程序的语言。
SVG遵循的是xml的规范&＃xff0c;与html5的使用有所区别
SVG绘制出来的是矢量图&＃xff0c;放大之后不会失真
官方文档链接

应用场景&＃xff1a;
1.图形&＃xff08;脑图&＃xff09;
2.图标、logo&＃xff08;矢量图&＃xff09;
3.动效

发展简史及支持情况
1.在2003年&＃xff0c;SVG1.1被确立为W3C标准
2.firefox、IE9&＃43;、chrome、safari均支持

使用&＃xff1a;
html&＃xff1a;

<svg width&＃61;&＃39;500px&＃39; height&＃61;&＃39;500px&＃39; xmlns&＃61;"http://www.w3.org/2000/svg" version&＃61;"1.1">svg>


js&＃xff1a;

var char &＃61; "http://www.w3.org/2000/svg";
var svg &＃61; document.createElementNS(char, &＃39;svg&＃39;);


SVG元素对象一般通过调用setAttribute()方法来设定属性值

基础元素&＃xff1a;


<line x1&＃61;&＃39;100&＃39; y1&＃61;&＃39;100&＃39; x2&＃61;&＃39;200&＃39; y2&＃61;&＃39;100&＃39; stroke&＃61;&＃39;red&＃39;>line>

<rect x&＃61;&＃39;100&＃39; y&＃61;&＃39;100&＃39; width&＃61;&＃39;100&＃39; height&＃61;&＃39;100&＃39; rx&＃61;&＃39;20&＃39; ry&＃61;&＃39;20&＃39;>rect>

<circle cx&＃61;&＃39;100&＃39; cy&＃61;&＃39;100&＃39; r&＃61;&＃39;50&＃39; fill&＃61;&＃39;green&＃39;>circle>

<ellipse rx&＃61;&＃39;100&＃39; ry&＃61;&＃39;50&＃39; cx&＃61;&＃39;250&＃39; cy&＃61;&＃39;100&＃39;>ellipse>

<polygon points&＃61;&＃39;100 100,70 150,130 150&＃39;>polygon>

<polyline points&＃61;&＃39;0 100,100 35,200 150,300 75,400 150,500 20&＃39;>polyline>

<text x&＃61;&＃39;300&＃39; y&＃61;&＃39;300&＃39;>学习text>


元素的属性名是固定的&＃xff0c;不可随意改动&＃xff1b;但可以直接写在dom上&＃xff0c;不用另外写在css文件里&＃xff0c;或内部样式表&＃xff0c;如fill&＃xff0c;stroke&＃xff0c;width&＃xff0c;height等等
fill-opacity&＃xff1a;填充透明度
stroke-opacity&＃xff1a;描边透明度

1.默认画的元素都会填充成黑色&＃xff0c;想改颜色用fill&＃xff0c;但画直线时&＃xff0c;没有可以填充的地方&＃xff0c;显示不出来&＃xff0c;所以需要单独设置stroke颜色才能看见

svg {border: 1px solid #000;
}
line {stroke: red;
}


<svg width&＃61;&＃39;500&＃39; height&＃61;&＃39;500&＃39; xmlns&＃61;"http://www.w3.org/2000/svg" version&＃61;"1.1"><line x1&＃61;&＃39;100&＃39; y1&＃61;&＃39;100&＃39; x2&＃61;&＃39;200&＃39; y2&＃61;&＃39;100&＃39;>line>
svg>


效果就是一条红色的线

2.线宽stroke-width是有写px的&＃xff0c;不是相对大小
一个椭圆&＃xff0c;以透明填充&＃xff0c;描边用橘色&＃xff0c;线宽20px&＃xff1a;

ellipse {stroke: orange;fill: transparent;stroke-width: 20px;
}


3.画折线时&＃xff0c;由于默认会填充&＃xff0c;所以会把第一个点和最后一个点连起来&＃xff0c;然后填充成黑色&＃xff0c;就像多边形一样

<polyline points&＃61;&＃39;0 100,100 35,200 150,300 75,400 150,500 20&＃39;>polyline>


把填充色改成透明色看看原来折线的样子

polyline {stroke: red;fill: transparent;
}


4.文字也能添加样式

text {stroke: red;font-size:20px;stroke-width:3px;
}


<text x&＃61;&＃39;300&＃39; y&＃61;&＃39;300&＃39;>学习text>


基础样式
1.fill: transparent;
2.stroke: red;
3.stroke-width: 10px;
4.stroke-opacity/fill-opacity: 0.5;
5.stroke-linecap: butt/round/square;
6.stroke-linejoin: bevel/round/miter;

与canvas的类似

路径

path 元素用于定义一个路径。
d: 定义路径指令
下面的命令可用于路径数据&＃xff1a;M &＃61; moveto移动到
L &＃61; lineto画线到
H &＃61; horizontal lineto水平线到&＃xff08;后面加水平走多少&＃xff0c;不是加坐标&＃xff09;
V &＃61; vertical lineto垂直线到&＃xff08;后面加垂直走多少&＃xff0c;不是加坐标&＃xff09;
C &＃61; curveto三次贝塞尔曲线到
S &＃61; smooth curveto光滑三次贝塞尔曲线到
Q &＃61; quadratic Bézier curve二次贝塞尔曲线到
T &＃61; smooth quadratic Bézier curveto光滑二次贝塞尔曲线到
A &＃61; elliptical Arc椭圆弧 A 70 120 0 1 1 150 200
Z &＃61; closepath关闭路径(连接起点和终点&＃xff0c;不分大小写)
注意&＃xff1a;以上所有命令均允许小写字母。大写表示绝对定位&＃xff08;对于svg&＃xff09;&＃xff0c;小写表示相对定位&＃xff08;相对前面那个路径&＃xff09;。


VvHh的使用

<path d&＃61;&＃39;M 100 100 v 100 h 100&＃39;>path>


从svg的(100,100)处垂直走100&＃xff0c;再水平走100&＃xff0c;水平走的方向根据写的数值和大小写Hh来控制

如果写成&＃xff1a;

<path d&＃61;&＃39;M 100 100 V 100 H 100&＃39;>path>


就相当于还是一个点&＃xff0c;画笔移动到svg(100,100)处&＃xff0c;V代表svg垂直方向100处&＃xff0c;还是这个点&＃xff0c;H代表水平方向100处&＃xff0c;也还是这个点&＃xff0c;所以不会有画线&＃xff0c;需要用小写的v和h

L使用&＃xff1a;画多段直线&＃xff1a;

<path d&＃61;&＃39;M 100 100 L 200 100, 200 200,100 200,100 150&＃39;>path>


可以一直lineTo下去

有svg的在线编辑器&＃xff0c;可以方便地画图形&＃xff0c;然后保存成svg文件&＃xff0c;在ide中打开&＃xff0c;就能看到对应的path
在线编辑器
随便画了个图

保存文件&＃xff0c;在浏览器打开&＃xff0c;就是图示的这样&＃xff0c;在vscode打开&＃xff0c;是这样的&＃xff1a;

已经写好了对应的svg元素及属性

二次贝塞尔曲线&＃xff1a;
M到起始点&＃xff0c;Q后面跟控制点&＃xff0c;最后写终止点

<path d&＃61;&＃39;M 100 100 Q 200 0 300 100&＃39;>path>


关于A指令的使用&＃xff1a;
这里有一篇很赞的文章&＃xff0c;给出了详细的解释

A指令是不指定椭圆圆心的&＃xff0c;指定起点和终点&＃xff0c;经过这两个点的椭圆有2个&＃xff0c;弧有4段&＃xff0c;
如果A指令的第4个参数为1&＃xff0c;代表选择大弧&＃xff0c;即图中的1或者4&＃xff1b;
如果第4个参数为0&＃xff0c;代表选择小弧&＃xff0c;即图中的2或者3&＃xff1b;
如果第5个参数为1&＃xff0c;代表选择从起点到终点顺时针的弧1&＃xff1b;
如果第5个参数为0&＃xff0c;代表选择从起点到终点逆时针的弧4

A 70 120 0 1 1 150 200的图&＃xff1a;

如果指定的起点和终点刚好在轴上&＃xff0c;画出的圆只有1个&＃xff0c;可选择的弧只有2段

如果设定了旋转角度&＃xff0c;是旋转完椭圆&＃xff0c;与起点终点匹对位置&＃xff0c;然后旋转弧段&＃xff0c;不是在未旋转时选好弧段再旋转

<path d&＃61;&＃39;M 100 100 A 70 120 90 1 1 150 200&＃39;>path>


关于path&＃xff0c;这里还有一篇很赞的文章&＃xff0c;可以参考