Question

我在Photoshop中制作了一个SVG。下面标签之间的两个项目是我在PS文件中输出的图层，然后我将它导出到SVG（我认为，这就是为什么它们不是。现在，我试图让其中一个项目转向（＃00599c）鼠标悬停时的蓝色。

我认为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>

Answer 1

您正在使用矢量标记（SVG）中的位图图像，这不是错误的，而是一种不好的做法。在内联SVG上更改颜色的方法是它是纯矢量图形（路径，多边形，矩形......），因此您可以使用fill属性而不是color或{{1} }。

background-color

如何在SVG内部更改颜色<img/>？

1 个答案: