2

以下の入力要素が :hover 状態のときに、ソースの svg 画像を変更せずに SVG コンテンツの塗りつぶしの色を変更することは可能ですか?

<input type="image" src="images/toolbar/check.svg" />

最終的に機能したソリューションは、Erik の提案に基づいています。

最初に、input 要素をインライン svg コンテンツを持つボタン要素に変更する必要があります。

<button type="button">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"     version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 95.453 100" enable-background="new 0 0 95.453 100" xml:space="preserve"><g><g><polygon points="94.587,27.48 31.657,86.15 31.217,85.68 18.847,72.41 0.566,52.81 14.106,40.19 32.387,59.79 81.776,13.74"/></g></g>
</svg>
</button>

次に、通常の CSS を使用して svg 塗りつぶしの色をスタイルできます。

button:hover svg {
    fill: red;
}
4

1 に答える 1

3

代わりにインライン svg を使用してから、CSS を追加して塗りつぶしの色のスタイルを設定してください。その方が効率的です。

于 2012-07-17T11:28:40.063 に答える