svg:

path标签中的d属性：

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置

L = lineto(L X,Y) ：画直线到指定的坐标位置

H = horizontal lineto(H X)：画水平线到指定的X坐标位置

V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线

S = smooth curveto(S X2,Y2,ENDX,ENDY)

Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线

T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线

Z = closepath()：关闭路径

stroke-dasharray：(Number)间隔多少像素绘制一次

stroke-dashoffset：(Number) 每次绘制偏离多少，必须配合stroke-dasharray使用

效果展示：

我们拿这个举例：

<svg t="1661927916674" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2510" width="70" height="70"><path d="M149.989688 874.093352a509.948138 509.948138 0 1 0-109.714286-162.700613 513.206978 513.206978 0 0 0 109.714286 162.700613z" fill="rgba(0,0,0,0.2)" p-id="2511"></path><path d="M317.4 348.6h120v330.7h-120zM601.6 348.6h120v330.7h-120z" p-id="38859" data-spm-anchor-id="a313x.7781069.0.i169" fill="#ffffff" class=""></path>
</svg>
第一个path标签是背景色
第二个path标签则是绘制中间两个竖杠的

仔细看：

一： H

直接从中规中矩变成斜腿这么做的呢看代码…

第一张图的path
<path d="M317.4 348.6h120v330.7h-120zM601.6 348.6h120v330.7h-120z" p-id="38859" data-spm-anchor-id="a313x.7781069.0.i169" fill="#ffffff" class=""></path>第二张图的path
<path d="M317.4 500.6h120v330.7h-120zM601.6 348.6h120v330.7h-120z" p-id="38859" data-spm-anchor-id="a313x.7781069.0.i169" fill="#ffffff" class=""></path>

唯一不一样的地方：

H画水平线到指定的X轴坐标位置

二： V

这种梯形：

梯形
<path d="M317.4 500.6h50v330.7h-100zM601.6 348.6h50v330.7h-100z" p-id="38859" data-spm-anchor-id="a313x.7781069.0.i169" fill="#ffffff" class=""></path>

不一样的地方：

V画垂直线到指定的Y坐标位置上边50v 下边100v就形成的上窄下款的梯形

三： M

这种劈叉的:

劈叉的
<path d="M100.4 348.6h120v330.7h-120zM800.6 348.6h120v330.7h-120z" p-id="38859" data-spm-anchor-id="a313x.7781069.0.i169" fill="#ffffff" class=""></path>

不一样的地方：

M 画笔起始的位置

剩余的以此类推比葫芦画瓢…

上面最后两个属性讲解：

<svg width="100%" height="100%"><path d="M10 20 1300 0" stroke="red" stroke-width="100" stroke-dasharray="50" stroke-dashoffset="200"></path>
</svg>

看效果：

值可自己调整：

stroke-dasharray=“50” 间隔50像素绘制一次（Number值）
stroke-dashoffset=“200” 每次绘制偏离200 （Number值）

完！

svg中 path标签的d属性相关推荐

SVG中path标签的简单使用
path标签概述他是由命令及其参数组组成的字符串,如: <path d="M0,0L10,20C30-10,40,20,100,100" stroke="red& ...
svg中path图形自适应_制作自己的自适应SVG图形和图表
svg中path图形自适应 A few weeks ago I talked about making this Star Trek vs. Star Wars chart in SVG using ...
svg中text标签字体、颜色、样式、大小、居中、旋转、垂直、text长度、tspan、textPath详解
svg中text标签属性 < text >基本属性定位 x.y, 颜色 fill, 描边 stroke,字号 font-size,粗细 font-weight,字体 font-famil ...
svg中path贝塞尔曲线和圆弧图文详解
最近研究了一下svg的path标签,功能非常强大,理论上来讲path标签可以画出任意图形.自己记性不太好,记录一下path的使用语法和自己的理解. path介绍 path用d属性来描述路径,语法格式大 ...
python - bs4提取XML/HTML中某个标签下的属性
python - bs4提取XML/HTML中某个标签下的属性一个例子就让你看明白.看完记得给博主点个赞噢. 我们要提取的xml原始文档来自以下网址: https://raw.githubuserc ...
HTML中img标签的src属性为绝对路径时，在IE中图片可显示，在firefox中不行
HTML中img标签的src属性为绝对路径时,在IE中图片可显示,在firefox中不行下图,src中为图片的绝对路径,此时在IE浏览器中图片可显示出来,firefox浏览器中图片不能显示出来代码 ...
html中hr标签有哪些属性,htmlhr标签的属性有哪些？HTMLhr标签的样式详解
html hr标签的属性有哪些?HTML hr标签的样式详解,本篇文章介绍了html中的hr标签的定义及其属性描述,还有关于html hr标签的样式使用的几种方法 html中hr标签定义和用法: 标签 ...
富文本上传的内容中img标签的src属性丢失
在一次项目上线后,突然发现后台系统的上传图片功能出了问题.是要发布一篇文章,文章内容是以富文本的形式保存的,上传图片后发现图片显示不出来,看数据库保存的字段发现img标签没有src属性,当时就奇了怪了 ...
html当中的属性cellspacing,html中table标签之cellspacing属性的作用
html中table标签之cellspacing属性的作用发布时间:2020-12-05 10:11:23 来源:亿速云阅读:60 作者:小新这篇文章给大家分享的是有关html中table标签之 ...

svg中 path标签的d属性

svg:

path标签中的d属性：

效果展示：

一： H

二： V

三： M

svg中 path标签的d属性相关推荐

最新文章

热门文章