我有以下代码:
<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 路径的填充颜色,而无需在路径标签内实际更改它?
是的,您可以将 CSS 应用到 SVG,但您需要匹配元素,就像设置 HTML 样式一样。如果您只想将其应用于所有 SVG 路径,您可以使用,例如:
path {
fill: blue;
}
至少在我测试的基于 WebKit 和 Gecko 的浏览器中,外部 CSS 似乎覆盖了路径的 fill
属性。当然,如果您编写 <path style="fill: green">
,那么它也将覆盖外部 CSS。
如果你想通过悬停在元素中来改变颜色,试试这个:
path:hover{
fill:red;
}
2021 年 4 月编辑
如果您进入 SVG 文件的源代码,您可以通过修改填充属性来更改颜色填充。
<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 文件并使用它。
我想出了另一种从 SVG 外部更改颜色的方法,即导入 SVG 内容并删除声明填充的样式规则。然后从我的 CSS 样式表中控制填充。
<svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Pic_icon"><path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" <!-- remove this -> style="fill:#08e1ea;" -->/></g></svg>
然后在我的 CSS 文件中,我开始:
svg{ fill: green; }
既然您要从 SVG 中删除更高层次的填充声明,那么外部的就可以控制了。
这对我来说完全没有问题。
你把这个 css 放在 svg circle 上。
svg:hover circle{
fill: #F6831D;
stroke-dashoffset: 0;
stroke-dasharray: 700;
stroke-width: 2;
}
放入你所有的svg:
fill="var(--svgcolor)"
在 CSS 中:
:root {
--svgcolor: tomato;
}
要使用伪类:
span.github:hover {
--svgcolor:aquamarine;
}
解释
根 = html 页面。 --svgcolor = 一个变量。 span.github = 选择一个带有 github 类的 span 元素,里面有一个 svg 图标并分配伪类悬停。
我发现了一个关于 css-tricks 的惊人资源:https://css-tricks.com/using-svg/
那里解释了一些解决方案。
我更喜欢需要对源 svg 进行最少编辑的那个,也不需要将它嵌入到 html 文档中。此选项使用 <object>
标记。
使用 <object>
将 svg 文件添加到您的 html 中;我还声明了 html 属性 width
和 height
。使用这些宽度和高度,svg 文档不会被缩放,我在关联的 svg css 文件中为 svg
标记使用 css transform: scale(...)
语句解决了这个问题。
<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>
创建一个 css 文件以附加到您的 svn 文档。我的源 svg 路径被缩放到 16px,我将它放大到 64 倍,因子为 4。它只有一个路径,所以我不需要更具体地选择它,但是路径有一个填充属性,所以我必须使用 !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 的路径填充颜色。请参阅下面的 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;
}
您可以使用此语法,但需要对 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>
currentColor
如果使用路径,可以设置描边颜色:我这里用于悬停效果:
svg:hover path {
stroke: blue;
}
您应该能够通过以下方式修改尺寸、颜色或其他属性:
:host::ng-deep svg {
...
}
这是一个对我有用的简单解决方案:
将 svg 放入带有“id”的 div 标签中
然后
#id-div svg g {
fill: #3366FF;
}
更改任何 SVG 颜色 使用标签添加 SVG 图像。
<img src="dotted-arrow.svg" class="filter-green"/>
要过滤到特定颜色,请使用以下 Codepen(单击此处打开 codepen)将十六进制颜色代码转换为 CSS 过滤器:例如,#00EE00 的输出为
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
将 CSS 过滤器添加到此类中。
.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
不定期副业成功案例分享
<svg>
标记包含 SVG,则它不起作用。<use href="external.svg#objId" />
包含来自外部 SVG 文件的对象,并且您的本地 CSS 在某种程度上仍将适用。