Css 填充外部导入的svg文件
我使用Angular 5,我将填充我的白色svg图像 我有这样一个svg文件:Css 填充外部导入的svg文件,css,angular,svg,sass,fill,Css,Angular,Svg,Sass,Fill,我使用Angular 5,我将填充我的白色svg图像 我有这样一个svg文件: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>ic_calendar</title><g id="Level_2" data-name="Level 2"><g id="screen"><path d="M18.5,5.11a2.55,2.55,0,0,0-.58-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>ic_calendar</title><g id="Level_2" data-name="Level 2"><g id="screen"><path d="M18.5,5.11a2.55,2.55,0,0,0-.58-1.68,2.27,2.27,0,0,0-1.7-.71H14.85v-1a.68.68,0,1,0-1.35,0v1H6.39v-1A.67.67,0,0,0,5.72,1,.68.68,0,0,0,5,1.68v1H3.75A2.15,2.15,0,0,0,1.5,5.09V16.4a2.71,2.71,0,0,0,.69,2A2.08,2.08,0,0,0,3.7,19H16.34a2.14,2.14,0,0,0,2.15-2.26C18.51,15.07,18.5,5.57,18.5,5.11Zm-15.65,0h0c0-.71.27-1,.9-1H5v1a.69.69,0,0,0,.68.68.68.68,0,0,0,.67-.68v-1H13.5v1a.68.68,0,1,0,1.35,0v-1H16.2a1,1,0,0,1,.71.26,1.17,1.17,0,0,1,.24.72V6.84H2.85Zm14.3,11.64c0,.78-.52.9-.81.91H3.7a.73.73,0,0,1-.56-.2,1.49,1.49,0,0,1-.29-1V8.2h14.3Z" style="fill:#fff"/><rect width="20" height="20" style="fill:none"/></g></g></svg>
或
但没什么。。。
有人能帮我吗
谢谢您的svg路径上有一个内联样式-
style=“fill:#fff”
。内联样式优先于CSS样式表中的样式。但这就是!重要信息
适用于
将您的样式更新为:
path{fill:blue!重要;}
或者只需删除内嵌样式。- 演示文稿属性
具有最高优先级,不能 可以使用svg
进行更改。因此,如果需要,则需要删除它们 要更改外部表中css
对象的颜色吗svg
CSS
- 使用
命令时,
对象会落入svg
阴影DOM
- 要设置这些对象的样式,必须使用强制继承
路径{ 填充:继承; 中风:继承; }
use
命令从
部分调用对象,并从外部表css
路径{
填充:继承;
中风:继承;
}
#屏风{
填充:道奇蓝;
}
rect{fill:#D5D5D5;}
日历
<svg class="myClass">
<use xlink:href="assetFolder/ic_calendar.svg#Level_2"></use>
</svg>
svg { fill: blue; }
path { fill: blue; }