乐闻世界logo
搜索文章和话题

如何更改 svg 元素的颜色

5 个月前提问
21 天前修改
浏览次数177

6个答案

1
2
3
4
5
6

在SVG(Scalable Vector Graphics)中,更改元素的颜色可以通过几种不同的方法来实现。以下是几种常用的方法:

1. 直接在SVG代码中使用fill属性更改颜色

你可以直接在SVG元素上使用fill属性来指定颜色。例如,如果你有一个矩形,可以这样更改它的颜色:

xml
<svg width="100" height="100"> <rect width="100" height="100" fill="blue" /> </svg>

fill属性的值从blue改为任何其他合法的颜色值,例如red#FF0000rgb(255,0,0)

2. 使用CSS更改颜色

SVG元素的颜色也可以通过CSS来控制。你可以将一个类应用于SVG元素,并在CSS中定义该类的样式。例如:

xml
<svg width="100" height="100"> <rect width="100" height="100" class="my-rectangle" /> </svg>

然后,在CSS中:

css
.my-rectangle { fill: green; }

你可以通过修改对应的CSS类来更改颜色,这使得在不同的状态下更改颜色变得非常灵活。

3. 使用JavaScript动态更改颜色

如果你需要在用户交互或是某个事件发生时改变颜色,可以使用JavaScript动态地修改fill属性。例如:

html
<svg width="100" height="100"> <rect id="my-rectangle" width="100" height="100" fill="yellow" /> </svg> <script> var rect = document.getElementById('my-rectangle'); rect.addEventListener('click', function() { rect.setAttribute('fill', 'purple'); }); </script>

以上代码中,当用户点击这个矩形时,它的颜色会从黄色变为紫色。

4. 使用内联样式更改颜色

除了上述方法外,还可以在SVG元素上使用内联样式来直接更改颜色:

xml
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" style="fill: orange;" /> </svg>

通过更改style属性中的fill值,你可以改变圆形的颜色。

以上就是一些在SVG中更改元素颜色的方法。当然,实现这些方法时,应该注意所选择的颜色值必须是SVG支持的格式,包括颜色名称、十六进制代码或RGB/RGBA表示法。

2024年6月29日 12:07 回复

CSS 过滤器适用于所有当前浏览器

更改任何 SVG 颜色

  1. 使用标签添加 SVG 图像 <img>

    html
    <img src="dotted-arrow.svg" class="filter-green"/>
  2. 要过滤到特定颜色,请使用以下Codepen(单击此处打开 Codepen)将十六进制颜色代码转换为 CSS 过滤器:

    例如,输出 #00EE00

    css
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

    在这里 filter为任何颜色生成一个。

  3. 将 CSS 添加 filter到此类中。

    cs
    .filter-green{ filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); }
2024年6月29日 12:07 回复

要更改任何 SVG 的颜色,您可以通过在任何文本编辑器中打开 SVG 文件来直接更改 SVG 代码。该代码可能类似于以下代码:

shell
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> <g> <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223 C181.113,454.921,171.371,464.663,161.629,474.404z"/> /* Some more code goes on */ </g> </svg>

您可以观察到有一些 XML 标签,如路径、圆形、多边形等。您可以在 style 属性的帮助下添加自己的颜色。看下面的例子

shell
<path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223 C181.113,454.921,171.371,464.663,161.629,474.404z"/>

将 style 属性添加到所有标签中,以便您可以获得所需颜色的 SVG。

根据 Daniel 的评论,我们可以直接使用 fill 属性,而不是在 style 属性中使用 fill 元素。

2024年6月29日 12:07 回复

如果你想动态改变颜色:

  1. 在代码编辑器中打开 SVG

  2. 添加或重写fill每个路径的属性fill="currentColor"

  3. 现在,该 svg 将采用字体颜色的颜色,因此您可以执行以下操作:

    shell
    svg { color : "red"; }
2024年6月29日 12:07 回复

您无法以这种方式更改图像的颜色。如果将 SVG 作为图像加载,则无法使用 CSS 或 JavaScript 在浏览器中更改其显示方式。

如果您想更改 SVG 图像,则必须使用 <object><iframe>使用 <svg>内联加载它。

如果您想使用页面中的技术,则需要Modernizr库,您可以在其中检查 SVG 支持并有条件地显示或不显示后备图像。然后,您可以内联 SVG 并应用您需要的样式。

比如下面示例代码

shell
#time-3-icon { fill: green; } .my-svg-alternate { display: none; } .no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png); } <svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/> </svg> <image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

您可以内联 SVG。使用类名 ( my-svg-alternate) 标记您的后备图像:

shell
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="time-3-icon" .../> </svg> <image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

在CSS中使用 no-svgModernizr(CDN: http: //ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js)中的类来检查SVG支持。如果没有任何 SVG 支持,则 SVG 块将被忽略并显示图像,否则图像将从 DOM 树中删除 ( display: none):

shell
.my-svg-alternate { display: none; } .no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png); }

然后您可以更改内联元素的颜色:

shell
#time-3-icon { fill: green; }
2024年6月29日 12:07 回复

仅具有路径信息的 SVG。您不能对图像执行此操作...因为您可以更改描边和填充信息的路径,然后就完成了。Adob​​e Illustrator

因此,通过 CSS 你可以覆盖路径fill值:

shell
path { fill: orange; }

但是,如果您想要一种更灵活的方式,因为您想在发生某些悬停效果时用文本更改它,请使用:

shell
path { fill: currentColor; } body { background: #ddd; text-align: center; padding-top: 2em; } .parent { width: 320px; height: 50px; display: block; transition: all 0.3s; cursor: pointer; padding: 12px; box-sizing: border-box; } /*** desired colors for children ***/ .parent{ color: #000; background: #def; } .parent:hover{ color: #fff; background: #85c1fc; } .parent span{ font-size: 18px; margin-right: 8px; font-weight: bold; font-family: 'Helvetica'; line-height: 26px; vertical-align: top; } .parent svg{ max-height: 26px; width: auto; display: inline; } /**** magic trick *****/ .parent svg path{ fill: currentcolor; } <div class='parent'> <span>TEXT WITH SVG</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32"> <path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path> </svg> </div>

运行代码片段Hide results

展开片段

2024年6月29日 12:07 回复

你的答案