Question

我是SVG的初学者。我试图在使用css的特定元素上悬停时更改多个元素的样式，但我不能，因为<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>

例如，当我将鼠标悬停在<path>上时，我需要更改ID为#api-svg的{{1}}填充元素。我怎样才能做到这一点？也许还有另一种方法可以在悬停时渲染和设计可重用元素。

Answer 1

定义拥有fill="inherit"的路径，然后您应该能够在fill="whatever"元素的样式上设置<use>，这样就可以了。

＆＃13;

use:hover {
  fill: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

这里没有什么过于复杂的东西。只需更改'use'元素，而不是defs区域中的任何内容（除非您希望它影响引用它的所有内容）。

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

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

除非我遗漏了某些内容，否则你不应该填写继承或其他任何东西。

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

2 个答案: