どのようにSVG <use>要素をホバーに書かせることができますか？

Question

私はSVG初心者です。私はを使用している<use>要素のため、CSSで特定の要素にカーソルを置いて複数の要素のスタイルを変更しようとしています。だから、私は次のよう<defs>

<defs> 
    <filter id="Sjax0b81q1" filterUnits="userSpaceOnUse">...</filter> 
    <circle cx="0" cy="0" r="40" id="action-circle" style="cursor: move; fill: #fff;" filter="url('#Sjax0b81q1')" class="el action-el"></circle> 
    <g id="condition-rhombus" style="cursor: move; fill: #fff;" class="el condition-el" transform="matrix(1,0,0,1,0,0)"> 
     <circle cx="0" cy="0" r="40" fill="none"></circle> 
     <path d="M -35 0, L 0 -35, L 35 0, L 0 35 L -35 0" style="stroke-linecap: round; stroke: white;" filter="url('#Sjax0b81q1')" class="condition-rhombus"></path> 
    </g> 
    <g id="svg-plus-button"> 
     <circle cx="0" cy="40" r="10" id="svg-plus-circle" fill="none" style="fill-opacity: 1;" class="svg-plus-circle"></circle> 
     <path d="M956.8,408.....408.5z" id="svg-plus-sign" fill="none" transform="matrix(0.008,0,0,0.008,-4,36)" style="pointer-events: none;" class="svg-plus-sign"></path> 
    </g> 
    <rect x="-20" y="-20" width="40" height="40" id="rect-active-layer" fill="none" style="pointer-events: visible;" class="rect-active-layer"></rect> 
    <path d="M252.967.....2v1Z" id="api-svg" class="cls-1"></path> 
</defs> 

を持っていると私はいくつかの<use>の要素が含まれている要素のグループを持っています。例えば

<g id="action-group-2" class="external action-group" transform="matrix(1,0,0,1,420,180)"> 
    <g class="internal action-group"> 
     <rect x="-40" y="-40" width="80" height="80" fill="none"></rect> 
    </g> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#action-circle"></use> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-plus-button" id="useSjax0b81q1k"></use> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rect-active-layer"></use> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#api-svg"></use> 
</g> 

私は#action-circleに置くと、私は、ID #api-svgを持つ要素で<path>塗りつぶしを変更する必要があります。 どうすればいいですか？ホバリングで再利用可能な要素をレンダリングし、スタイリングする別の方法があるかもしれません。

Answer 1

パスがfill="inherit"になるように定義すると、<use>要素のスタイルにfill="whatever"を設定すれば効果があります。

use:hover { 
 
    fill: red; 
 
}

<svg> 
 
    <defs> 
 
    <circle id="test" fill="inherit" cy="10" r="10" /> 
 
    </defs> 
 
    <use xlink:href="#test" transform="translate(10,0)" /> 
 
    <use xlink:href="#test" transform="translate(30,0)" /> 
 
    <use xlink:href="#test" transform="translate(50,0)" /> 
 
    <text y="40">Hover over the circles!</text> 
 
</svg>

Answer 2

ここに過度に複雑なものは何もありません。あなたがそれを参照するすべてに影響を与えない限り、defs領域内の何かではなく、単に 'use'要素を変更してください。

use要素をCSSセレクタ（通常はidが最も単純な場合など）で通常のCSSを使用してスタイル設定することもできます。

また、処理しているsvg 'use'要素にfill svg属性を設定することもできます。

私が何かを紛失していない限り、継承するものなどは必要ありません。