论坛 › 马黑黑教程专版 › svg : circle to path演示

马黑黑 发表于 2023-9-29 23:10

svg : circle to path演示

<style>
.mysvg { border: 1px solid gray; fill: none; stroke: steelblue; }
</style>

<svg class="mysvg" width="200" height="200">
        <circle id="circle" cx="100" cy="100" r="90"></circle>
</svg>
<svg class="mysvg" width="200" height="200">
        <path id="cPath" d="M0 0 H200"></path>
</svg>
<div id="pathMsg"></div>

<script>

let createPath = (eCircle) => {
        let x = 1*eCircle.getAttribute('cx'),
                y = 1*eCircle.getAttribute('cy'),
                r = 1*eCircle.getAttribute('r');
        return `M${x-r} ${y} A${r} ${r} 0 1 1 ${(x + r)} ${y} A${r} ${r} 0 1 1 ${x-r} ${y}`;
};

cPath.setAttribute('d',createPath(circle));
pathMsg.innerText = createPath(circle);

</script>

马黑黑 发表于 2023-9-29 23:11

一楼，左边的是 circle 元素，右边的是 path 元素。完整代码：<style>
.mysvg { border: 1px solid gray; fill: none; stroke: steelblue; }
</style>

<svg class="mysvg" width="200" height="200">
        <circle id="circle" cx="100" cy="100" r="90"></circle>
</svg>
<svg class="mysvg" width="200" height="200">
        <path id="cPath" d="M0 0 H200"></path>
</svg>
<div id="pathMsg"></div>

<script>

let createPath = (eCircle) => {
        let x = 1*eCircle.getAttribute('cx'),
                y = 1*eCircle.getAttribute('cy'),
                r = 1*eCircle.getAttribute('r');
        return `M${x-r} ${y} A${r} ${r} 0 1 1 ${(x + r)} ${y} A${r} ${r} 0 1 1 ${x-r} ${y}`;
};

cPath.setAttribute('d',createPath(circle));
pathMsg.innerText = createPath(circle);

</script>

马黑黑 发表于 2023-9-29 23:14

我的设计是酱紫：

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

马黑黑 发表于 2023-9-29 23:22

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

红影 发表于 2023-9-30 08:24

感觉还是直接用circle更方便{:4_204:}

红影 发表于 2023-9-30 08:30

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

马黑黑 发表于 2023-9-30 08:42

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

对，反正结构不能单一

马黑黑 发表于 2023-9-30 08:48

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

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

马黑黑 发表于 2023-9-30 08:51

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

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

红影 发表于 2023-9-30 09:55

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

是的，越丰富越好{:4_173:}

红影 发表于 2023-9-30 09:57

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

嗯嗯，一切看需要而定。

红影 发表于 2023-9-30 09:58

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

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

小水瓢 发表于 2023-9-30 17:57

进错了，只会灌水，看不懂高深的东西{:5_106:}

马黑黑 发表于 2023-9-30 18:30

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

进来了就喝一瓢咖啡{:4_190:}

查看完整版本: svg : circle to path演示