Question

问题

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

我的对象：

=INDEX(B3:B; COUNT(B3:B))

问题是该对象是一个具有交互的元素，并且在悬停时它没有注册锚点。为了解决这个问题，我尝试了：

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

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

在对象之前......

我最初采用了使用xlink方法的方法：

object{
   pointer-events: none;
}

但是我遇到了真正的问题，让SVG部分在浏览器中保持一致的风格。 Chrome特别不喜欢它。

有没有办法可以通过CSS获取SVG样式的单个部分，即填充颜色，并且仍然按照我试图通过将其包装在锚中的方式使用它？有更新（更好）的方法吗？

你可以找到一个有效的例子来更好地展示我的问题。请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>元素继承了一些样式属性。这可能是造型困境的根源。

制作svg对象可点击链接并维护对象悬停样式

1 个答案: