SVGの塗りつぶし色を別の要素のホバーで変更します

Question

私は今日、ホバーでsvgの塗りつぶし色を変更する方法についてかなりの時間研究してきました。私はオブジェクトタグを使用し、CSSファイルにリンクして外部にスタイルを設定できるようにしています。しかし、私は実際にSVGそのものにマウスを乗せたときにのみこれを動作させることができます。私は自分のオブジェクトとテキストラベルをタグ内に持っていて、SVGの塗りつぶしとテキストラベルの色を同時に変更したいと思います。オブジェクトからさらにターゲットを絞ってみると、うまくいきません。私はオブジェクト内のSVGが親要素を認識しないので、それが問題かどうかはわかりません。どんな助けもありがとう！以下は私のhtmlのスニペットです。私はクラス "icon-md"が私のSVGの高さと幅しか定義していないことを指摘しておきます。

<div class="icon-button"> 
      <a href="#"> 
       <object type="image/svg+xml" class="icon-md" data="img/load-board.svg"></object><h3 class="icon-label">Load Board</h3> 
      </a> 
     </div> 

ここに私のSVGファイルのHTMLもあります。私は実際のパスに "path"のIDを与えました。これが私の外部CSSファイルで特に目標としているものです。

<?xml-stylesheet type="text/css" href="../stylesheets/main.css"?> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64"> 
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 10 10 L 10 15 L 15 15 L 15 10 L 10 10 z M 17 10 L 17 15 L 22 15 L 22 10 L 17 10 z M 10 17 L 10 22 L 15 22 L 15 17 L 10 17 z M 17 17 L 17 22 L 22 22 L 22 17 L 17 17 z" overflow="visible" font-family="Bitstream Vera Sans"/> 
</svg> 

Answer 1

は、あなたがそのようなことを考えていましたか？

div{ 
 
    padding:10px; 
 
    border:1px solid black; 
 
} 
 
div:hover svg path, 
 
div:hover{ 
 
    fill:red; 
 
    color:red; 
 
}

<div> 
 
This is plain text 
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64"> 
 
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 10 10 L 10 15 L 15 15 L 15 10 L 10 10 z M 17 10 L 17 15 L 22 15 L 22 10 L 17 10 z M 10 17 L 10 22 L 15 22 L 15 17 L 10 17 z M 17 17 L 17 22 L 22 22 L 22 17 L 17 17 z" overflow="visible" font-family="Bitstream Vera Sans"/> 
 
</svg> 
 
</div>