练练手之“四环”“磁铁”（svg）

wl_

已于 2023-12-12 21:07:05 修改

阅读量393

点赞数 7

分类专栏：可视化 svg 文章标签：前端 javascript 服务器

于 2023-12-12 21:01:08 首次发布

本文链接：https://blog.csdn.net/wanglei1991gao/article/details/134958831

版权

可视化同时被 2 个专栏收录

19 篇文章 3 订阅

订阅专栏

svg

1 篇文章 0 订阅

订阅专栏

文本是闲暇之余练习svg的运用的产物，记录以备有需。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500px" height="500px">
        <path d="M150,100 A50,50 0 1,1 150,99.999" stroke="#fff" stroke-width="16" fill="none" />
        <path d="M150,100 A50,50 0 1,1 150,99.999" stroke="#bbb" stroke-width="14" fill="none" />

        <path d="M130,100 A50,50 0 1,0 130,99.999" stroke="#fff" stroke-width="16" fill="none" />
        <path d="M130,100 A50,50 0 1,0 130,99.999" stroke="#bbb" stroke-width="14" fill="none" />

        <path d="M310,100 A50,50 0 1,1 310,99.999" stroke="#fff" stroke-width="16" fill="none" />
        <path d="M310,100 A50,50 0 1,1 310,99.999" stroke="#bbb" stroke-width="14" fill="none" />

        <path d="M390,100 A50,50 0 1,1 390,99.999" stroke="#fff" stroke-width="16" fill="none" />
        <path d="M390,100 A50,50 0 1,1 390,99.999" stroke="#bbb" stroke-width="14" fill="none" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500px" height="500px">
        <path d="M150,150 A50,50 0 1,1 150,80" stroke="#999" stroke-width="30" stroke-linecap="square" fill="none" />
        <path d="M150,150 A50,50 0 1,1 150,80" stroke="#f00" stroke-width="30" stroke-linecap="butt" fill="none" />
</svg>