马黑黑 发表于 2023-9-30 11:26

svg : ellipse to path 演示

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

<svg class="mysvg" width="200" height="200">
        <ellipse id="Ellipse" cx="100" cy="100" rx="90" ry="60"></ellipse>
</svg>
<svg class="mysvg" width="200" height="200">
        <path id="ePath" d="M0 0 H200"></path>
</svg>
<div id="pathMsg"></div>

<script>

let createPath = (ele) => {
        let cx = 1 * ele.getAttribute('cx'),
                cy = 1 * ele.getAttribute('cy'),
                rx = 1 * ele.getAttribute('rx'),
                ry = 1 * ele.getAttribute('ry');
        return `
                M${cx-rx} ${cy}
                A${rx} ${ry} 0 1 1 ${(cx + rx)} ${cy}
                A${rx} ${ry} 0 1 1 ${cx-rx} ${cy}
        `;
};

ePath.setAttribute('d',createPath(Ellipse));
pathMsg.innerText = createPath(Ellipse);

</script>

马黑黑 发表于 2023-9-30 11:28

左边是 ellipse 标签绘制的椭圆，右边是 path 标签根据 ellipse 相关属性值绘制的椭圆。完整代码：
<style>
.mysvg { border: 1px solid gray; fill: none; stroke: steelblue; }
</style>

<svg class="mysvg" width="200" height="200">
        <ellipse id="Ellipse" cx="100" cy="100" rx="90" ry="60"></ellipse>
</svg>
<svg class="mysvg" width="200" height="200">
        <path id="ePath" d="M0 0 H200"></path>
</svg>
<div id="pathMsg"></div>

<script>

let createPath = (ele) => {
        let cx = 1 * ele.getAttribute('cx'),
                cy = 1 * ele.getAttribute('cy'),
                rx = 1 * ele.getAttribute('rx'),
                ry = 1 * ele.getAttribute('ry');
        return `
                M${cx-rx} ${cy}
                A${rx} ${ry} 0 1 1 ${(cx + rx)} ${cy}
                A${rx} ${ry} 0 1 1 ${cx-rx} ${cy}
        `;
};

ePath.setAttribute('d',createPath(Ellipse));
pathMsg.innerText = createPath(Ellipse);

</script>

马黑黑 发表于 2023-9-30 11:34

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

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

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

红影 发表于 2023-9-30 12:40

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

红影 发表于 2023-9-30 12:40

学习了，感谢黑黑的教学{:4_187:}

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

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

不客气

马黑黑 发表于 2023-9-30 13:09

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

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

梦油 发表于 2023-9-30 15:02

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

红影 发表于 2023-9-30 15:45

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

黑黑差不多把svg的路径都讲了一遍呢，辛苦了{:4_204:}

红影 发表于 2023-9-30 15:47

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

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

马黑黑 发表于 2023-9-30 17:20

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

path是万能的

马黑黑 发表于 2023-9-30 17:22

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

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

马黑黑 发表于 2023-9-30 17:31

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

谢谢。一样祝你

梦油 发表于 2023-9-30 17:43

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

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

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

看不懂，只是来点赞的。

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

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

感谢

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

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

如此最好

红影 发表于 2023-9-30 18:35

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

那也要有本事驾驭它{:4_173:}

红影 发表于 2023-9-30 18:35

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

黑黑讲得这么系统这么完整，很赞{:4_199:}

梦油 发表于 2023-9-30 20:14

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

是啊，进了花潮门就是一家人嘛。
页: [1] 2
查看完整版本: svg : ellipse to path 演示