我如何設計 SVG 樣式<use>懸停元素？

Question

我是 SVG 的初學者。 我正在嘗試<use> css 更改懸停在特定<use>元素上的多個<use>元素的樣式，但我不能，因為<use>元素使用Shadow DOM 。

我有以下<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

這里沒有什么過於復雜的。 只需更改 'use' 元素，而不是 defs 區域中的任何內容（除非您希望它影響引用它的所有內容）。

您可以通過普通 css 或 css 選擇器設置 use 元素的樣式，例如它的 id 可能是最簡單的。

或者您可以在您正在處理的 svg 'use' 元素上設置 fill svg 屬性。

除非我遺漏了一些東西，否則您不需要填充繼承或任何東西。