马黑PHP整站系统

svg : ellipse to path 演示

位置: 首页 > 代码集锦[ 发布时间: 2023.9.30  作者: 马黑  阅读: 155 ]

【说明】ellipse 是 svg 绘制椭圆的标签,它与绘制圆形的 circle 标签很接近,不同的是 r 半径分为两个:rx 和 ry,转换为 path d 路径时要充分考虑它们。

<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>
		

前一篇: svg : polygon & polyline to path 演示
下一篇: svg : rect to path 演示

发表评论:

       

评论列表 [0条]

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com