化妆SVG对象可点击的链接和维护的对象hover样式

我有我的SVG被包裹在一个锚的对象。我面对的问题是我想让我的SVG具有悬停风格，但我也需要它是可点击的，因此需要锚点。

我的对象：

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

的问题是，该物体是具有交互的元件并且在悬停它不是注册锚。为了解决这个问题，我尝试过：

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尤其不喜欢它。

有没有一种方法可以通过CSS对我的SVG的各个部分进行样式化，即填充颜色，还是以我试图通过将其包装在锚点中的方式来使用它？有没有更新的（更好的）方法？

你可以找到一个工作示例，以更好地展示我的问题。请find that here。

来源

2015-07-01 Doidgey

CSS样式不适用于文档边界。 HTML中的任何CSS都不会影响外部SVG中的元素。 –

从你的问题中不完全清楚你到底想要做什么（一个测试用例会很有用）。

但您是否尝试过使用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>元素一些样式属性。这可能是造型风潮的根源。

来源

2015-07-01 15:30:06

我会尝试举一个例子来更好地展示问题 – Doidgey

用一个工作示例更新我的OP – Doidgey

化妆SVG对象可点击的链接和维护的对象hover样式

回答

相关问题