我如何改变一个'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'标签内的路径:

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

你可以内联，比如:

<path fill="#ccc">

svg{
   path{
        fill: #ccc

2019-02-15 13:50:18

其他回答

你不应该直接在SVG图像上设置颜色，如果你想编程SVG的颜色。

在2021年，您可以使用以下CSS内容进行颜色更改。

html { --iron-icon-fill-color-1: green; --iron-icon-fill-color-2: red; --iron-icon-stroke-color: white; } svg#icon-green { fill: var(--iron-icon-fill-color-1, currentcolor); stroke: var(--iron-icon-stroke-color, none); } svg#icon-red { fill: var(--iron-icon-fill-color-2, currentcolor); stroke: var(--iron-icon-stroke-color, none); } svg#icon { fill: var(--iron-icon-fill-color-x, currentcolor); stroke: white; } <html> <body> <svg id="icon-green" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40"> <circle cx="20" cy="20" r="18" stroke-width="3"/> <path d="M 10,10 30,30 M 10,30 30,10" fill="none" stroke-width="6"/> </svg> <svg id="icon-red" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40"> <circle cx="20" cy="20" r="18" stroke-width="3"/> <path d="M 10,10 30,30 M 10,30 30,10" fill="none" stroke-width="6"/> </svg> <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40"> <circle cx="20" cy="20" r="18" stroke-width="3"/> <path d="M 10,10 30,30 M 10,30 30,10" fill="none" stroke-width="6"/> </svg> </body> </html>

2021-06-29 22:32:48

带有背景色的框元素上的SVG掩码将导致:

body{ overflow:hidden; } .icon { --size: 70px; display: inline-block; width: var(--size); height: var(--size); transition: .12s; -webkit-mask-size: cover; mask-size: cover; } .icon-bike { background: black; animation: 4s frames infinite linear; -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); } @keyframes frames { 0% { transform:translatex(100vw) } 25% { background: red; } 75% { background: lime; } 100% { transform:translatex(-100%) } } <i class="icon icon-bike" style="--size:150px"></i>

注意- Internet Explorer浏览器不支持SVG掩码

2019-06-19 14:15:56

如果你想动态改变颜色:

在代码编辑器中打开SVG 添加或重写每个路径的填充属性为fill="currentColor" 现在，svg将采用你的字体颜色，所以你可以做一些像这样的事情: svg { 颜色:“红色”; ｝

2020-12-04 16:56:30

我添加了一个测试页面-通过滤镜设置为SVG着色:

例如,

滤镜:反色(0.5)棕色(1)饱和(5)色相旋转(175度)

上传和着色您的SVG - Jsfiddle

我的想法来自:在图像标签SVGs上交换填充颜色

2018-03-01 11:42:38

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