我当前在illustrator中创建了一个边框，并使用illustrator导入了一个也是SVG的图表，将其放置在SVG边框中。所以，我想从我创建的图表中创建悬停效果。当我刚刚有了svg图时，我设法使悬停效果工作，但由于我向其中添加了边框，悬停效果就不工作了。我知道边界在阻挡效果。我想在CSS中实现这一点。下面是css代码，当我没有添加边框时，它正在工作。下面是带有边框和图表的html代码，我使用下面的html将SVG代码放入其中。

这个小片段是我希望悬停效果的地方：所以，我把它放在这里，因为它有很多html代码需要查看。但是，您将在中间看到它。

<a class="scaling-svg-color" href="#">
              <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
              style="fill:#fff;stroke:#5e5e5e" />
</a>

----HTML代码----

<a class="scaling-svg-color" href="#">
              <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
              style="fill:#fff;stroke:#5e5e5e" />
</a>

---悬停效果的CSS代码----

<a class="scaling-svg-color" href="#">
              <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
              style="fill:#fff;stroke:#5e5e5e" />
</a>

顺晟科技：

当使用svgs做悬停效果时，我的方法是有两个图像，一个有悬停效果，一个没有。悬停时，交换图像。

查看文件:

<a class="scaling-svg-color" href="#">
              <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
              style="fill:#fff;stroke:#5e5e5e" />
</a>

SCSS文件:

<a class="scaling-svg-color" href="#">
              <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
              style="fill:#fff;stroke:#5e5e5e" />
</a>

您的悬停规则不起作用有以下几个原因:

元素属性中的

1. 规则覆盖应用于该元素的CSS规则。因此规则不会重写。

2. 不起作用，因为它不是SVG元素的有效样式属性。也许你指的是这里？

要强制CSS规则优先，您有两个选项。一种方法是添加标志，就像我在下面的示例中所做的那样。但是，作为一般建议，不鼓励使用这一标志。因为它扰乱了继承。

或者，每当您从Illustrator导出打算嵌入到web页面并使用CSS进行样式化的SVG时，我建议您确保更改导出选项“CSS属性”。将其设置为notgenerate attributes，就像SVG所做的那样。如果您没有使用属性，您的CSS规则就会起作用。