Adobe Illustrator で出力した SVG ファイルで作業しているので、不要なコードがかなりあると思います。検索して検索した後、私はこれを思い付くことができました。
<?xml-stylesheet type="text/css" href="SVG_css.css"?>
path:hover{
fill:#005289;
}
これにより、ロールオーバーが外部スタイルシートから機能するようになりますが、もちろんすべてのパスをロールオーバーとしてターゲットにします。
たとえば、ロールオーバーしたときに 3 つの要素がハイライトされるように、グループ内のパスをターゲットにする必要があります。Illustrator のコード構造は次のとおりです。
<g id="WIRE_ROOM">
<path fill="#BCBEC0" d="M357.3,24.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
V24.4z"/>
<path fill="#BCBEC0" d="M357.3,51.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
V51.4z"/>
<path fill="#BCBEC0" d="M376.7,24.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
V24.4z"/>
</g>
ID をスタイルシートに関連付けようとしましたが、運がありませんでした...クラスを SVG に直接関連付けることも試みました。
class="locations" をパスに追加すると、もちろん、要素のグループではなく、その 1 つの要素のみがロールオーバーされます。このようにクラスを追加しても何も起こりませんでした。g id="WIRE_ROOM" class="場所"
知っていることはすべて検索して試してみたので、誰かがこれを手伝ってくれたら幸いです。
したがって、「WIRE_ROOM」の場合、これらは異なる機器であり、1 つの共通領域を示すために、それらの 3 つの領域すべてを強調表示するホバーが必要です。ありがとうございました！