HTML5(八)——SVG 之 path 详解

职业喷子 發表於 2021-8-9 16:09:00

path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果，我们就开始学习 path 如何应用。
<h1 class="pgc-h-arrow-right" data-track="73">一、path 路径详解</h1>
1.1、path 命令
path 用于定义一个路径，其中命令就是控制这条路径的，以下命令就是可用于路径数据：
<div class="pgc-img"><img alt="HTML5(八)——SVG 之 path 详解" class="syl-page-img lazyload" data-src="https://p6-tt.byteimg.com/origin/pgc-image/8a97453620324a9189541342793c7bf0?from=pc">
 
</div>
注：以上所有命令大小写都可以，区别是大写命令表示绝对定位，小写表示相对定位。
1.2、path 使用
使用语法：<path d=" M x1 y1 L x2 y2 H x3.... " stroke="red"></path>
d：引出路径，d 中的值由多条命令组合而成。
圆弧在实际场景中应用非常广泛，A 命令中参数较多，large-arc 和 sweep 较难理解，详细介绍下。
使用语法：<path d="M x y A rx ry x-axis-rotation large-arc sweep x y"></path>
<div class="pgc-img"><img alt="HTML5(八)——SVG 之 path 详解" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/24c906e047644b9bba1fec57416898dd?from=pc">
 
</div>
如上图所示，A 到 B 两个点再加半径，可以绘制出 4 条弧线，具体选哪一条呢？就是由 large-arc (是否是大弧)和 sweep(是否逆时针旋转) 两个参数决定。
large-arc = 1 表示弧度大于等于180，反之就是小于180。
sweep = 0 表示逆时针旋转，反正顺时针旋转。
所以上述 4 条弧线分别对应的两个参数为：
<ul>
<li data-track="105">1：(0 0)</li>
<li data-track="106">2：(0,1)</li>
<li data-track="107">3：(1,1)</li>
<li data-track="108">4：(1,0)</li>
</ul>
eg：使用 path 绘制一条直线、半圆、直线，连接起来形成一个拱桥，代码如下：
<pre class="syl-page-code hljs yaml"><code><svgversion="1.1" height="400" width="550">
<path d="
M 0 100//（0，100）是起点
L 100 100// 画一条直接到 (100,100)
A 100 100 0 1 1 300 100// 画一段圆弧
L 400 100 //画一条直线到 (400,100)
" stroke="black" stroke-width="1" fill="none"></path>
</svg></code></pre>
运行结果如下：
<div class="pgc-img"><img alt="HTML5(八)——SVG 之 path 详解" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/d0a8398b69c245b39c95773ab7e2cd45?from=pc">
 
</div>
可以自己修改上述 A 中参数观察半圆的变化。
1.3、js 操作path
我们经常使用js动态添加、移除元素等，可以实现更炫酷的特效，那js能动态操作path吗？如何操作呢？
我们使用js动态绘制一个与上边案例eg1一样的path。
<div class="cnblogs_code">
<pre><svgversion="1.1" height="400" width="550" id="svg"></svg>
<script >
window.onload = function(){
let svg = document.getElementById("svg")
let path = document.createElement("path")
path.setAttribute('d',"M 0 100L 100 100A 100 100 0 1 1 300 100 L 400 100")
svg.appendChild(path)
}
</script></pre>
</div>
 
运行代码，我们发现没有报错，也没有显示任何结果。
添加：alert(path)，打印出 。
说明 html 把 path 当作普通的 html 标签解析了，发现并不认识该标签，所以页面没有任何效果，此时我们需要介绍一个新的创建元素方法。
createElementNS介绍
createElementNS 是创建一个具有指定的命名空间URI和限定名称的元素。
使用语法：document.createElementNS(namespaceURI, qualifiedName[, options]);
<ul>
<li data-track="122">namespaceURI 指定与元素相关联的命名空间URI的字符串。创建的元素的namespaceURI (en-US)属性使用namespaceURI的值进行初始化。</li>
<li data-track="123">qualifiedName指定要创建的元素的类型的字符串。创建的元素的nodeName (en-US)属性使用qualifiedName的值进行初始化。</li>
<li data-track="124">options可选的一个可选的包含单个属性的ElementCreationOptions对象，其值是预先使用customElements.define()定义的自定义元素的标签名称。为了向后兼容自定义元素规范的早期版本，一些浏览器允许您在此使用字符串替代对象，其中字符串的值是自定义元素的标签名称。</li>
</ul>
生成path元素代码：
<div class="cnblogs_code">
<pre>let path = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
)</pre>
</div>
 
js操作属性时，html元素与SVG元素区别：
普通html元素可以使用两种方法：
<ol start="1">
<li data-track="129">setAttribute(x,val) / getAttribute(x)</li>
<li data-track="130">obj.x</li>
</ol>
SVG操作方法只有一种
<ol start="1">
<li data-track="132">setAttribute(x,val) / getAttribute(x)</li>
</ol>
eg3：图表中饼图是特别常见的，我们就先使用 js 动态地绘制一个扇形圆弧。
<div class="cnblogs_code">
<pre><svgversion="1.1" height="400" width="550" id="svg"></svg>
<script >
function d2a(n){
return Math.PI*n/180
 }
function pie(ang1,ang2,r,cx,cy){
let svg = document.getElementById("svg")
let path = document.createElementNS("http://www.w3.org/2000/svg","path")
let arr = []
let x1 = cx + Math.sin(d2a(ang1))*r
let y1 = cy - Math.cos(d2a(ang1))*r
let x2 = cx + Math.sin(d2a(ang2))*r
let y2 = cy - Math.cos(d2a(ang2))*r
arr.push(`M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 0 1 ${x2} ${y2} `)
arr.push("Z")
path.setAttribute('d',arr.join(' '))
svg.appendChild(path)
}
window.onload = function(){
pie(20,180,200,200,200)
}
</script></pre>
</div>
 
运行结果如图所示：
<div class="pgc-img"><img alt="HTML5(八)——SVG 之 path 详解" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/e99f903631c94e14ac9925a56e343674?from=pc">
 
</div>
如果有兴趣，可以自己修改开始角度和结束角度，可以绘制出很多种不同效果的圆弧。
<h1 class="pgc-h-arrow-right" data-track="141">二、样式以及优先级</h1>
上述代码
<div class="cnblogs_code">
<pre><path d="
M 0 100//（0，100）是起点
L 100 100// 画一条直接到 (100,100)
" stroke="black" stroke-width="1" fill="none"></path></pre>
</div>
上述属性可以分为两类：
<ul>
<li data-track="144">只能为属性 - 决定图形或路径形状的</li>
<li data-track="145">可以放样式 - 视觉上的效果</li>
</ul>
如 troke、fill等是控制视觉上的效果，这样的属性可以放入 style 样式中。所以上述代码可以改写为：
<div class="cnblogs_code">
<pre><path d="
M 0 100//（0，100）是起点
L 100 100// 画一条直接到 (100,100)
" style="stroke:black;stroke-width:1;fill:none"></path></pre>
</div>
该样式可以放到 head 的 style 中，代码为：
<div class="cnblogs_code">
<pre>path{
fill:none;
stroke:black;
stroke-width:1
}</pre>
</div>
 
还可以通过 class、id、标签等添加样式，他们的优先级分别为：
属性< * < 标签 < class < id < 行间
path 的样式控制同样适用于 SVG 预定义的 rect、circle、ellipse 等元素。
如果觉得还不错！
点个关注，下篇解密 SVG 动画！ 
来源：https://www.cnblogs.com/web-learn/p/15119165.html

頁: [1]

琼殿技术论坛's Archiver

HTML5(八)——SVG 之 path 详解