我該如何做 <image> SVG內部會變色嗎？

Question

我在Photoshop中制作了SVG。 下面的標記之間的兩個項目是我將文件導出到SVG之前在PS文件中擁有的層（我認為這是為什么不使用它們的原因。現在，我正在嘗試使這些項目之一轉向（＃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或background-color 。

svg:hover {
    fill: #00599c;
}

我該如何做 <image> SVG內部會變色嗎？

問題描述

1 個解決方案

解決方案1
1 2015-10-19 19:22:10

我該如何做 <image> SVG內部會變色嗎？

問題描述

1 個解決方案

解決方案1 1 2015-10-19 19:22:10

解決方案1
1 2015-10-19 19:22:10