css - 使 svg 对象可点击链接并保持对象悬停样式

Question

问题

我有一个 SVG 对象，它包裹在一个 anchor 中。我面临的问题是我希望我的 SVG 具有悬停样式，但我还需要它是可点击的，因此需要 anchor 。

我的对象:

<a href="http://mylink.co.uk">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn't support SVG images</span>
    </object>
</a>

问题是该对象是一个具有交互作用的元素，悬停时它没有注册 anchor 。为了解决这个问题，我尝试了:

object{
   pointer-events: none;
}

这解决了该问题并让 成为可点击元素。缺点是现在我的对象悬停样式不起作用，因为从技术上讲，该对象不再是我悬停的元素。

对象之前...

我最初采用的是使用xlink方式的方法:

<a href="#" class="my-button">
  <svg viewBox="0 0 297 149" class="my-icon">
     <use xlink:href="svgsprite.svg#my-icon"></use>
  </svg>
</a>

但我遇到了让 SVG 部分在浏览器中保持样式一致的实际问题。 Chrome 尤其不喜欢它。

有没有一种方法可以让我的 SVG 的各个部分通过 CSS 设置样式，即填充颜色，并且仍然按照我尝试的方式使用它，将它包装在一个 anchor 中？有更新(更好)的方法吗？

您可以找到一个工作示例来更好地说明我的问题。请find that here .

Answer 1

从您的问题中并不清楚您到底想做什么(测试用例会很有用)。

但是您是否尝试过使用 SVG 的方法 <a>元素，而不是 HTML 元素？也许这会帮助您避免遇到的问题。

<svg viewBox="0 0 297 149" class="my-icon">
  <a xlink:href="http://mylink.co.uk" class="my-button">
    <use xlink:href="svgsprite.svg#my-icon"></use>
  </a>
</svg>

SVG 从外部继承了一些样式属性 <a>元素以稍微出乎意料的方式。这可能是您造型问题的根源。