评论资讯 [ 总 847 则 ]
·悄然 - 2024-7-2 09:26
·飞飞 - 2024-7-1 20:05
·悄然 - 2024-7-1 20:05
·悄然 - 2024-7-1 09:04
·飞飞 - 2024-7-1 09:00
·飞飞 - 2024-7-1 08:59
·悄然 - 2024-6-30 13:25
·飞飞 - 2024-6-29 18:28
·悄然 - 2024-6-29 18:27
·飞飞 - 2024-6-29 13:18
·飞飞 - 2024-7-1 20:05
·悄然 - 2024-7-1 20:05
·悄然 - 2024-7-1 09:04
·飞飞 - 2024-7-1 09:00
·飞飞 - 2024-7-1 08:59
·悄然 - 2024-6-30 13:25
·飞飞 - 2024-6-29 18:28
·悄然 - 2024-6-29 18:27
·飞飞 - 2024-6-29 13:18
友情链接
网站统计
svg : ellipse to path 演示
【说明】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条]