svg : circle to path演示

马黑黑

马黑黑

一楼，左边的是 circle 元素，右边的是 path 元素。完整代码：

1. <style>
   
2. .mysvg { border: 1px solid gray; fill: none; stroke: steelblue; }
   
3. </style>
   
4. 
   
5. <svg class="mysvg" width="200" height="200">
   
6.         <circle id="circle" cx="100" cy="100" r="90"></circle>
   
7. </svg>
   
8. <svg class="mysvg" width="200" height="200">
   
9.         <path id="cPath" d="M0 0 H200"></path>
   
10. </svg>
    
11. <div id="pathMsg"></div>
    
12. 
    
13. <script>
    
14. 
    
15. let createPath = (eCircle) => {
    
16.         let x = 1*eCircle.getAttribute('cx'),
    
17.                 y = 1*eCircle.getAttribute('cy'),
    
18.                 r = 1*eCircle.getAttribute('r');
    
19.         return `M${x-r} ${y} A${r} ${r} 0 1 1 ${(x + r)} ${y} A${r} ${r} 0 1 1 ${x-r} ${y}`;
    
20. };
    
21. 
    
22. cPath.setAttribute('d',createPath(circle));
    
23. pathMsg.innerText = createPath(circle);
    
24. 
    
25. </script>

复制代码

马黑黑

我的设计是酱紫：

用 A 指令根据 circle 的相关属性值做两个弧形，弧形都是大弧、顺时针走向（1 1）。

马黑黑

本例，所生成的路径，可以用于自由路径进度条播放器插件，实现圆环进度条。

红影

感觉还是直接用circle更方便

红影

当然两个半圆也需要，记得以前一个心形就是用两个半圆加个正方形做的

马黑黑

红影 发表于 2023-9-30 08:30
当然两个半圆也需要，记得以前一个心形就是用两个半圆加个正方形做的

对，反正结构不能单一

马黑黑

红影 发表于 2023-9-30 08:24
感觉还是直接用circle更方便

如果你只想画一个圆，那自然首选 circle 标签。问题是，实际应用场景中，circle 未必能满足需求，这时候就得用万能的 path 路径

马黑黑

红影 发表于 2023-9-30 08:30
当然两个半圆也需要，记得以前一个心形就是用两个半圆加个正方形做的

path 路径可以综合利用各个指令绘制出所需要的一切形状。用 svg 作图，基本形状指令固然经常用到，但 path 才是最强大的标签，它是万能的。

红影

马黑黑 发表于 2023-9-30 08:42
对，反正结构不能单一

是的，越丰富越好

红影

马黑黑 发表于 2023-9-30 08:48
如果你只想画一个圆，那自然首选 circle 标签。问题是，实际应用场景中，circle 未必能满足需求，这时候 ...

嗯嗯，一切看需要而定。

红影

马黑黑 发表于 2023-9-30 08:51
path 路径可以综合利用各个指令绘制出所需要的一切形状。用 svg 作图，基本形状指令固然经常用到，但 pat ...

好像下面衬着别的图，用它可以去描出轮廓的吧。

小水瓢

进错了，只会灌水，看不懂高深的东西

马黑黑

小水瓢 发表于 2023-9-30 17:57
进错了，只会灌水，看不懂高深的东西

进来了就喝一瓢咖啡