我如何在悬停时设置 SVG <use> 元素的样式？答案

【问题标题】：How i can style SVG <use> elements on hover?我如何在悬停时设置 SVG <use> 元素的样式？
【发布时间】：2018-05-22 04:06:03
【问题描述】：

我是 SVG 的初学者。我正在尝试使用 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 上时，我需要更改<path> 填充id 为#api-svg 的元素。

我该怎么做？也许还有另一种方法可以在悬停时渲染和设置可重用元素的样式。

【问题讨论】：

标签： javascript css svg snap.svg xlink

【解决方案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>

【讨论】：

我需要将默认填充设置为fill: #fff。因为所有 SVG 元素都在 Canvas 上解析和渲染，以创建我的<svg> 的屏幕截图。
填充继承在这里没有做任何事情，只需将其忽略，它应该可以正常工作。

【解决方案2】：

这里没有什么太复杂的地方。只需更改“使用”元素，而不是 defs 区域中的任何内容（除非您希望它影响引用它的所有内容）。

您可以通过普通 css 或 css 选择器设置 use 元素的样式，例如它的 id 可能是最简单的。

或者您可以在您正在处理的 svg 'use' 元素上设置填充 svg 属性。

除非我遗漏了什么，否则你不应该需要填充继承或任何东西。

【讨论】：