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

news2024/7/11 10:17:15

文本是闲暇之余练习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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1305147.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！