如何使 SVG 内部的 <image> 改变颜色？答案

【问题标题】：How do I make an <image> inside of SVG change color?如何使 SVG 内部的 <image> 改变颜色？
【发布时间】：2015-10-20 03:22:10
【问题描述】：

我在 Photoshop 中制作了 SVG。下面标签之间的两项是我在将 PS 文件导出到 SVG 之前在 PS 文件中拥有的图层（我认为，这就是为什么它们不是 . ) 鼠标悬停时呈蓝色。

我认为 CSS 是完成此任务的最简单方法，但我不知道该怎么做。

谢谢

   <style>
      .hover { 
        background-color: #00599c;
    }
      </style>
    </head>
    <body>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="787.25" height="599.75" viewBox="0 0 3149 2399">
      <image xlink:href="data:img/png;base64,random symbols..." class="hover" x="2512" y="845" width="310" height="419"/>

       <image xlink:href="data:img/png;base64,random symbols..." x="2413" y="411" width="578" height="543"/>

      </svg>

    </body>

【问题讨论】：

变蓝？你的意思是完全被一个和图片一样大小的蓝色矩形代替？
是你想要改变颜色的线条图吗？还是图片所在的盒子？
是线条图，是的。该图像是美国几个州的透明轮廓。我想用蓝色填充轮廓。抱歉，对此很陌生。
当然可以使用svg filters 或者如果js 不是问题，使用canvas

标签： html css svg

【解决方案1】：

您在矢量标签 (SVG) 中使用位图图像，这并没有错，而是一种不好的做法。在内联 SVG 上更改颜色的方式是如果它是纯矢量图形（路径、多边形、矩形...），因此您可以使用 fill 属性而不是 color 或 background-color。

svg:hover {
    fill: #00599c;
}

【讨论】：