<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" >
<defs>
<mask id="ym">
<rect x="100" y="0" width="100" height="200" fill="white"/>
<circle cx="100" cy="150" r="50" fill="white"/>
<circle cx="100" cy="50" r="50" fill="black"/>
</mask>
</defs>
<circle cx="100" cy="100" r="100" fill="red"/>
<circle cx="100" cy="50" r="50" fill="red" />
<circle cx="100" cy="100" r="100" fill="blue" mask="url(#ym)"/>
<circle cx="100" cy="50" r="20" fill="blue" />
<circle cx="100" cy="150" r="20" fill="red" />
</svg>
太极图svg源码
原创
©著作权归作者所有:来自51CTO博客作者fqbqrr的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:用vim的怪事情
下一篇:nth-child是以1开头
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 旋转的太极图
用css画一个旋转的太极图。
css html 伪元素 -
有趣的css - 太极八卦图
用css 实现一个动态的太极八卦图。
动效设计 交互设计 ux/ui css 太极八卦 -
vue使用阿里svg图标
vue3使用svg图标
矢量图标 svg svg vue