Question

由于某种原因，我的悬停无法正常工作。它改变了每个具有相同类的项目的填充，我不知道为什么。我正在使用 DEFS 和 USE，这与我看到的所有示例都不同，它们以我想要的方式工作。

所包含的代码已简化为两个矩形，我只希望将鼠标悬停在其中一个以更改颜色。

CSS

rect
{
    stroke-width : 3;
    stroke : black;
    width : 300;
    height : 100;
    rx : 15;
    ry : 15;
}

text
{
    stroke : black;
    fill : gold;
    text-anchor : middle;
    pointer-events: none;
}

.client
{
    fill : lightsalmon;
}

.client:hover
{
    fill : green;
}

HTML

<!DOCTYPE HTML>
<HTML>
    <HEAD>
        <LINK rel="stylesheet" type="text/css" href="Test.css">
    </HEAD>
    <BODY>
        <DIV id="svgDiv">
            <SVG id="svgDoc" width="100%" viewBox="0, 0, 1500, 1000">
                <DEFS>
                    <G id="table">
                        <RECT width="300" height="90" />
                    </G>
                </DEFS>
                
                <G id="clientTables" transform="translate(0, 250) scale(0.5 0.5)" class="client">
                    <G id="TCLNT" transform="translate(500, 250)">
                        <USE xlink:href="#table" />
                        <TEXT x="150" y="50">TEST_CLNT</TEXT>
                    </G>
                    <G id="TCPHN" transform="translate(50, 50)">
                        <USE xlink:href="#table" />
                        <TEXT x="150" y="50">TEST_CLNT_PHN</TEXT>
                    </G>
                </G>
            </SVG>
        </DIV>
    </BODY>
</HTML>

Answer 1

.client 类是两个元素的包装器。因此，您可以在悬停时同时定位两个元素。

需要将 <g> 标签连接到 :hover 选择器。这样做：

.client g:hover {
  fill : green;
}

仅更改悬停元素的 SVG 填充

1 个答案: