我可以使用CSS更改svg路径的填充颜色吗?


199

我有以下代码:

  <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>&nbsp;
  </span>

是否可以使用CSS或其他方法更改SVG路径的填充颜色,而无需在path标签内部实际更改它的颜色?



如今,您可以通过<symbol>和包括外部文件并设置其样式<use>。看到这个答案
totymedli

Answers:


218

是的,您可以将CSS应用于SVG,但是您需要匹配元素,就像样式HTML一样。如果仅要将其应用于所有SVG路径,则可以使用例如:

path {
    fill: blue;
}​

外部CSS似乎覆盖了路径的fill属性,至少在我测试过的WebKit和基于Gecko的浏览器中。当然,如果您说,<path style="fill: green">那也将覆盖外部CSS。


7
Chrome仍然可以使用吗?我在尝试使用CSS更改SVG路径的颜色时遇到困难。
达拉斯·克拉克

5
谢谢尼古拉斯,我相信我已经找到了原因。我的SVG通过<img>标记嵌入到页面中,CSS似乎无法修改其中的任何内容。这样对吗?
达拉斯·克拉克

40
请记住,为了使CSS样式化SVG,您必须在标记中包含SVG代码,如果通过<svg>标记包含SVG,则该代码将不起作用。
里卡多·泽

2
@RicardoZea一个警告:您可以在其中包含来自外部SVG文件的对象,<use href="external.svg#objId" />并且本地CSS在某种程度上仍将适用。
肯·贝罗斯

1
@KenBellows是的,我现在已经知道了。需要注意的一件事是,我们需要在CSS中使用SVG特定的属性,否则它将无法正常工作。例如,要更改背景颜色,请使用fill: #000;代替background: #000;
里卡多·泽


28

如果您进入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文件并对其进行播放。


2
基于问题的措辞在技术上是正确的,“ ...其他方法实际上并未在path标签内对其进行更改”,并且完全按照我的需要工作。有一个赞!
特拉维斯·沃森

5
这个答案如何?问题在于CSS,而不是本地SVG
zhuhang.jasper

2
您有自己的贾斯珀先生的答案吗?
塞缪尔·拉姆赞

2
这不是答案。这是问题的歪曲。
QMaster


8

我在css-tricks上发现了一个很棒的资源:https : //css-tricks.com/using-svg/

那里介绍了一些解决方案。

我更喜欢对源svg进行最少编辑的操作,也不需要将其嵌入html文档中。此选项利用<object>标签。


使用<object>;将svg文件添加到html中。我还声明了html属性widthheight。使用这些宽度和高度,svg文档不会得到缩放,我通过在关联的svg css文件中transform: scale(...)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" ?>

4

您可以使用此语法,但需要在SVG文件中进行一些更改。并从SVG本身中删除所有填充/描边。

icon.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>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

“删除任何填充/描边”-删除填充和描边可能会破坏svg的功能(至少在我看来是这样做的,并且在预览窗口中查看结果)。或者,可以使用currentColor
Frank Nocke

4

可以更改svg的路径填充颜色。请参阅下面的CSS代码段:

  1. 要将颜色应用于所有路径: svg > path{ fill: red }

  2. 申请第一个d路径: svg > path:nth-of-type(1){ fill: green }

  3. 申请第二条d路径: svg > path:nth-of-type(2){ fill: green}

  4. 要申请其他d路径,请仅更改路径号:
    svg > path:nth-of-type(${path_number}){ fill: green}

  5. 要在Angular 2至8中支持CSS,请使用封装概念:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

2

放入您所有的svg:

fill="var(--svgcolor)"

在CSS中:

:root {
  --svgcolor: tomato;
}

要使用伪类:

span.github:hover {
  --svgcolor:aquamarine;
}

说明

root = html页面。
--svgcolor =一个变量。
span.github =选择一个带有github类,一个svg图标的span元素并分配伪类悬停。


欢迎来到Neto的StackOverflow。这看起来是一个很好的答案。感谢您的帮助。
srm
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.