HTML5(八)——SVG 之 path 详解

前端人 2021-08-09 16:10:30
html html5 svg 详解 path


path 是 SVG 基本形状中最强大的一个,不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中,介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果,我们就开始学习 path 如何应用。

一、path 路径详解

1.1、path 命令

path 用于定义一个路径,其中命令就是控制这条路径的,以下命令就是可用于路径数据:

HTML5(八)——SVG 之 path 详解

 

注:以上所有命令大小写都可以,区别是大写命令表示绝对定位,小写表示相对定位。

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>

HTML5(八)——SVG 之 path 详解

 

如上图所示,A 到 B 两个点再加半径,可以绘制出 4 条弧线,具体选哪一条呢?就是由 large-arc (是否是大弧)和 sweep(是否逆时针旋转) 两个参数决定。

large-arc = 1 表示弧度大于等于180,反之就是小于180。

sweep = 0 表示逆时针旋转,反正顺时针旋转。

所以上述 4 条弧线分别对应的两个参数为:

  • 1:(0 0)
  • 2:(0,1)
  • 3:(1,1)
  • 4:(1,0)

eg:使用 path 绘制一条直线、半圆、直线,连接起来形成一个拱桥,代码如下:

<svg version="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>

运行结果如下:

HTML5(八)——SVG 之 path 详解

 

可以自己修改上述 A 中 参数观察半圆的变化。

1.3、js 操作path

我们经常使用js动态添加、移除元素等,可以实现更炫酷的特效,那js能动态操作path吗?如何操作呢?

我们使用js动态绘制一个与上边案例eg1一样的path。

<svg version="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 100 L 100 100 A 100 100 0 1 1 300 100 L 400 100")
svg.appendChild(path)
}
</script>

 

运行代码,我们发现没有报错,也没有显示任何结果。

添加:alert(path),打印出 [object HTMLUnknownElement]。

说明 html 把 path 当作普通的 html 标签解析了,发现并不认识该标签,所以页面没有任何效果,此时我们需要介绍一个新的创建元素方法。

createElementNS介绍

createElementNS 是创建一个具有指定的命名空间URI和限定名称的元素。

使用语法:document.createElementNS(namespaceURI, qualifiedName[, options]);

  • namespaceURI 指定与元素相关联的命名空间URI的字符串。创建的元素的namespaceURI (en-US)属性使用namespaceURI的值进行初始化。
  • qualifiedName指定要创建的元素的类型的字符串。 创建的元素的nodeName (en-US)属性使用qualifiedName的值进行初始化。
  • options可选的一个可选的包含单个属性的ElementCreationOptions对象,其值是预先使用customElements.define()定义的自定义元素的标签名称。为了向后兼容自定义元素规范的早期版本,一些浏览器允许您在此使用字符串替代对象,其中字符串的值是自定义元素的标签名称。

生成path元素代码:

let path = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
)

 

js操作属性时,html元素与SVG元素区别:

普通html元素可以使用两种方法:

  1. setAttribute(x,val) / getAttribute(x)
  2. obj.x

SVG操作方法只有一种

  1. setAttribute(x,val) / getAttribute(x)

eg3:图表中饼图是特别常见的,我们就先使用 js 动态地绘制一个扇形圆弧。

<svg version="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>

 

运行结果如图所示:

HTML5(八)——SVG 之 path 详解

 

如果有兴趣,可以自己修改开始角度和结束角度,可以绘制出很多种不同效果的圆弧。

二、样式以及优先级

上述代码

<path d="
M 0 100 //(0,100)是起点
L 100 100 // 画一条直接到 (100,100)
" stroke="black" stroke-width="1" fill="none"></path>

上述属性可以分为两类:

  • 只能为属性 - 决定图形或路径形状的
  • 可以放样式 - 视觉上的效果

如 troke、fill等是控制视觉上的效果,这样的属性可以放入 style 样式中。所以上述代码可以改写为:

<path d="
M 0 100 //(0,100)是起点
L 100 100 // 画一条直接到 (100,100)
" style="stroke:black;stroke-width:1;fill:none"></path>

该样式可以放到 head 的 style 中,代码为:

path{
fill:none;
stroke:black;
stroke-width:1
}

 

还可以通过 class、id、标签等添加样式,他们的优先级分别为:

属性< * < 标签 < class < id < 行间

path 的样式控制同样适用于 SVG 预定义的 rect、circle、ellipse 等元素。

如果觉得还不错!

点个关注,下篇解密 SVG 动画 !

版权声明
本文为[前端人]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/web-learn/p/15119165.html

  1. HTML + CSS + JavaScript to achieve cool Fireworks (cloud like particle text 3D opening)
  2. HTML + CSS + JavaScript realizes 520 advertising love tree (including music), which is necessary for programmers to express themselves
  3. Solve the problem of Web front-end deployment server (it can be deployed online without a server)
  4. HTML + CSS + JS make wedding countdown web page template (520 / Tanabata Valentine's Day / programmer advertisement)
  5. What else can driverless minibus do besides "Park connection"?
  6. Cloud native leads the era of all cloud development
  7. NRM mirror source management tool
  8. Bring it to you, flex Jiugong
  9. Lolstyle UI component development practice (II) -- button group component
  10. Deconstruction assignment in ES6
  11. Luo 2 peerless Tang clan was officially launched. The official gave a key point, and the broadcast time was implied
  12. 20初识前端HTML(1)
  13. 当新零售遇上 Serverless
  14. 20 initial knowledge of front-end HTML (1)
  15. When new retail meets serverless
  16. [golang] - go into go language lesson 5 type conversion
  17. [golang] - go into go language lesson 6 conditional expression
  18. HTML5(八)——SVG 之 path 详解
  19. HTML5 (8) -- detailed explanation of SVG path
  20. 需要开通VIP以后页面内容才能复制怎么办?控制台禁用javascript即可
  21. Web前端|CSS入门教程(超详细的CSS使用讲解,适合前端初学者)
  22. 实践积累 —— 用Vue3简单写一个单行横向滚动组件
  23. Serverless 全能选手,再下一城
  24. What if you need to open a VIP to copy the page content? Just disable JavaScript on the console
  25. Web front end | CSS introductory tutorial (super detailed CSS explanation, suitable for front-end beginners)
  26. Practice accumulation - write a single line horizontal scroll component simply with vue3
  27. Dili Reba is thin again. She looks elegant and high in a strapless hollow skirt, and her "palm waist" is beautiful to a new height
  28. Serverless all-round player, next city
  29. The difference between MySQL semi synchronous replication and lossless semi synchronous replication
  30. Vue表单设计器的终极解决方案
  31. The ultimate solution for Vue form designer
  32. Nginx从理论到实践超详细笔记
  33. Yu Shuxin's red backless swimsuit is split to the waist and tail, with a concave convex figure and excessive color matching, and his face is white to dazzling
  34. Nginx ultra detailed notes from theory to practice
  35. 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
  36. typecho全站启用https
  37. CCTV has another popular employee. The off-site interpretation is very professional, and the appearance ability is no less than that of Wang Bingbing
  38. [animation Xiaole | CSS] 086. Cool water wave loading transition animation
  39. Enable HTTPS in Typecho
  40. 50天用JavaScript完成50个web项目,我学到了什么?
  41. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  42. What have I learned from completing 50 web projects with JavaScript in 50 days?
  43. "My neighbor doesn't grow up" has hit the whole network. There are countless horse music circles, and actor Zhou Xiaochuan has successfully made a circle
  44. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  45. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  46. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  47. 30 + women still wear less T-shirts and jeans. If they wear them like stars, they will lose weight
  48. 数栈技术分享前端篇:TS,看你哪里逃~
  49. Several stack technology sharing front end: TS, see where you escape~
  50. 舍弃Kong和Nginx,Apache APISIX 在趣链科技 BaaS 平台的落地实践
  51. Abandon the landing practice of Kong and nginx, Apache apisik on the baas platform of fun chain technology
  52. 浪迹天涯king教你用elementui做复杂的表格,去处理报表数据(合并表头,合并表体行和列)
  53. 前端HTML两万字图文大总结,快来看看你会多少!【️熬夜整理&建议收藏️】
  54. Wandering around the world king teaches you to use elementui to make complex tables and process report data (merge header, merge table body rows and columns)
  55. 路由刷新数据丢失 - vuex数据读取的问题
  56. Front end HTML 20000 word graphic summary, come and see how much you can【 Stay up late to sort out & suggestions]
  57. Route refresh data loss - vuex data reading problem
  58. Systemctl系统启动Nginx服务脚本
  59. Systemctl system startup nginx service script
  60. sleepless