我如何改变一个'svg'元素的颜色?

我想使用这种技术并更改SVG颜色，但到目前为止我还不能这样做。我在CSS中使用这个，但我的图像总是黑色的，无论如何。

我的代码:

.change-my-color { 填充:绿色; ｝ svg < > <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src=" ppngback .png" /> < / svg >

当前回答

如果你想对一个内联SVG文件这样做，也就是说，例如，CSS内容中的背景图像:

背景:url(“数据:photo /svg+xml;charset=utf8，%3Csvg xml ='http://www.w3.org/2000/svg' fill='rgba(1.39,215.1)' viewBox=' ..3e % %3C/svg%3E’);

当然，替换…使用您的内联图像代码。

2018-06-07 20:24:46

其他回答

定位'svg'标签内的路径:

<svg>
   <path>....
</svg>

你可以内联，比如:

<path fill="#ccc">

svg{
   path{
        fill: #ccc

2019-02-15 13:50:18

你不能用这种方法改变图像的颜色。如果将SVG作为图像加载，则无法在浏览器中使用CSS或JavaScript更改它的显示方式。

如果你想改变你的SVG图像，你必须使用<object>， <iframe>或使用< SVG > inline加载它。

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

See:

#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)标记你的备份映像:

<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中使用Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js)的no-svg类来检查SVG支持。如果没有任何SVG支持，SVG块将被忽略，图像将被显示，否则图像将从DOM树中删除(display: none):

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

然后你可以改变你的内联元素的颜色:

#time-3-icon {
   fill: green;
}

2014-03-07 14:39:04

我的用法是引导图标，复制您的SVG路径。

span{
    path{
        color: red;
    }
}

SVG引导的一个例子:

        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-exclamation-octagon" viewBox="0 0 16 16">
          <path
            d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z" />
          <path
            d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
        </svg>

2022-08-12 20:37:40

例如，在你的HTML中:

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

使用jQuery:

$("#struct1").css("fill", "<desired colour>");

2019-08-27 07:18:29

你可以试着用这个css滤镜来给它上色:

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

2020-08-06 13:03:43

我如何改变一个'svg'元素的颜色?

推荐文章

最新文章

标签