在css中,可以使用stroke属性改变svg颜色,只需要给svg中的polyline标签设置“stroke:颜色值”样式即可。stroke属性定义一条线,文本或元素轮廓颜色,值和color一样,支持rgba透明通道。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
有些时候我们也许会使用css直接操控svg,svg可以像jpg,png那样以图片形式使用,也可以直接以标签形式使用。前者不可以设置颜色,而后者可以。
示例:
<svg width=8px height=12px viewBox=0 0 8 12 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink> <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch --> <title>Rectangle 8 Copy 10</title> <desc>Created with Sketch.</desc> <defs></defs> <g id=Page-1 stroke=none stroke-width=1 fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round> <polyline id=Rectangle-8-Copy-10 stroke=#8F99AE stroke-width=2 transform=translate(2.242641, 6.242641) scale(1, -1) rotate(-135.000000) translate(-2.242641, -6.242641) points=5.24264069 9.24264069 -0.757359313 9.24264069 -0.757359313 3.24264069 -0.757359313 3.24264069></polyline> </g> </svg>
效果:
加入改变颜色的代码
svg g polyline { stroke: red; }
效果:
推荐学习:css视频教程
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。