svg : ellipse to path 演示

马黑黑

马黑黑

左边是 ellipse 标签绘制的椭圆，右边是 path 标签根据 ellipse 相关属性值绘制的椭圆。完整代码：

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

复制代码

马黑黑

绘制椭圆，用到四个关键参数（属性）：

cx : 定义的椭圆中心的x坐标
cy : 定义的椭圆中心的y坐标
rx : 定义的水平半径
ry : 定义的垂直半径

一楼演示的椭圆变路径，与昨天的圆变路径道理相同，都是用圆弧指令 A（a）来实现最终效果，二者的区别仅在于，处理椭圆时需要考虑两个半径。

红影

这个和前面的圆一样，都是一个用相应标签直接绘制，一个是用路径绘制的

红影

学习了，感谢黑黑的教学

马黑黑

红影 发表于 2023-9-30 12:40
学习了，感谢黑黑的教学

不客气

马黑黑

红影 发表于 2023-9-30 12:40
这个和前面的圆一样，都是一个用相应标签直接绘制，一个是用路径绘制的

这一系列的帖子，将svg基本图形都用path转换一次，这是很有价值的

梦油

祝你阖家欢乐、幸福安康。

红影

马黑黑 发表于 2023-9-30 13:08
不客气

黑黑差不多把svg的路径都讲了一遍呢，辛苦了

红影

马黑黑 发表于 2023-9-30 13:09
这一系列的帖子，将svg基本图形都用path转换一次，这是很有价值的

嗯，现在知道了，它的基本图形也可以用path的方式表述的。

马黑黑

红影 发表于 2023-9-30 15:47
嗯，现在知道了，它的基本图形也可以用path的方式表述的。

path是万能的

马黑黑

红影 发表于 2023-9-30 15:45
黑黑差不多把svg的路径都讲了一遍呢，辛苦了

指令都讲过了，A指令不想重复了。现在要做的是svg基本图形转路径，基本也做完，难度最大的 rect 也杀青了。

马黑黑

梦油 发表于 2023-9-30 15:02
祝你阖家欢乐、幸福安康。

谢谢。一样祝你

梦油

马黑黑 发表于 2023-9-30 17:31
谢谢。一样祝你

我们一起开心，我们一起欢乐。

小水瓢

看不懂，只是来点赞的。

马黑黑

小水瓢 发表于 2023-9-30 17:52
看不懂，只是来点赞的。

感谢

马黑黑

梦油 发表于 2023-9-30 17:43
我们一起开心，我们一起欢乐。

如此最好

红影

马黑黑 发表于 2023-9-30 17:20
path是万能的

那也要有本事驾驭它

红影

马黑黑 发表于 2023-9-30 17:22
指令都讲过了，A指令不想重复了。现在要做的是svg基本图形转路径，基本也做完，难度最大的 rect 也杀青了 ...

黑黑讲得这么系统这么完整，很赞

梦油

马黑黑 发表于 2023-9-30 18:30
如此最好

是啊，进了花潮门就是一家人嘛。