我有以下代码:
<span>
<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
<desc></desc>
<defs/>
<path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
</svg>
</span>
是否可以使用CSS或其他方法更改SVG路径的填充颜色而不在路径标记内实际更改它？
Nic*_*ley 194
是的,您可以将CSS应用于SVG,但您需要匹配该元素,就像设置HTML样式一样.如果您只想将其应用于所有SVG路径,可以使用,例如:
?path {
fill: blue;
}?
外部CSS似乎覆盖路径的fill属性,至少在我测试的WebKit和基于Gecko的浏览器中.当然,如果你写,<path style="fill: green">那么那也将覆盖外部CSS.
Sam*_*zan 23
如果您进入SVG文件的源代码,您可以通过修改fill属性来更改颜色填充.
<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
使用您喜欢的文本编辑器,打开SVG文件并使用它.
小智 15
你把这个CSS用于svg圈.
svg:hover circle{
fill: #F6831D;
stroke-dashoffset: 0;
stroke-dasharray: 700;
stroke-width: 2;
}
小智 9
放入你所有的 svg：
fill="var(--svgcolor)"
在 CSS 中：
:root {
--svgcolor: tomato;
}
使用伪类：
span.github:hover {
--svgcolor:aquamarine;
}
解释
根 = html 页面。
--svgcolor = 一个变量。
span.github = 选择一个带有 github 类的 span 元素，里面有一个 svg 图标并分配伪类悬停。
小智 8
可以更改 svg 的路径填充颜色。请参阅下面的 CSS 片段：
为所有路径应用颜色： svg > path{ fill: red }
申请第一个d路径： svg > path:nth-of-type(1){ fill: green }
申请第二条d路径： svg > path:nth-of-type(2){ fill: green}
申请不同的d路径，只更改路径号：
svg > path:nth-of-type(${path_number}){ fill: green}
要支持 Angular 2 到 8 中的 CSS，请使用封装概念：
:host::ng-deep svg path:nth-of-type(1){
fill:red;
}
我遇到了一个关于css-tricks的惊人资源:https://css-tricks.com/using-svg/
那里解释了一些解决方案.
我更喜欢需要对源svg进行最少编辑的那个,并且也不要求它嵌入到html文档中.此选项使用<object>标记.
使用svg文件添加到你的html中<object>; 我还声明了html属性width和height.使用这些宽度和高度svg文档不会被缩放,我使用css transform: scale(...)语句处理svg我关联的svg css文件中的标记.
<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>
创建一个css文件以附加到您的svn文档.我的源svg路径缩放到16px,我将它升级到64,因子为4.它只有一条路径,所以我不需要更具体地选择它,但路径有一个fill属性,所以我不得不!IMPORTANT用来迫使css先行.
#svg2 {
width: 64px; height: 64px;
transform: scale(4);
}
path {
fill: #333 !IMPORTANT;
}
在开始<svg标记之前编辑目标svg文件,以包含样式表; 请注意,href是相对于svg文件的URL.
<?xml-stylesheet type="text/css" href="myfile.css" ?>
您可以使用此语法，但需要对 SVG 文件进行一些更改。并从 SVG 本身删除任何填充/描边。
图标.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g,
must add viewBox on symbol just copy yhe viewbox from the svg tag itself
must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
<!-- add all the icon's paths and shapes here -->
<path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0 C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136 c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857 c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262 C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939 c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06 C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>
图标.html
<svg><use xlink:href="file_path/location.svg#location"></use></svg>