评论资讯 [ 总 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 : circle to path 演示
svg 的 circle 标签可以通过 path A 指令转换成 d 数据。代码如下:
<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="M10 100 H190"></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>
前一篇: 脚链
下一篇: svg : polygon & polyline to path 演示
发表评论:
评论列表 [0条]