svg - 链接中断 SVG 过渡

Question

我实际上面临一个关于 SVG 和 CSS3 过渡属性的奇怪问题。

我有一个简单的 SVG：

<svg version="1.1" class="world" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 200">
<g id="US East" class="interesting">
    <polyline points="(...)"/>
</g>
</svg>

使用这种 Sass/Compass 风格：

.world {
  display: block;
  width:250px;
  height: 200px; 
}

.world .interesting {
  fill: #759a41;
  @include transition-property(fill);
  @include transition-duration(0.3s);
}

.world .interesting:hover {
    fill: #aee265;
    cursor: pointer;
}

它就像一个魅力。直到我有一个 SVG 链接<a xlink:href="#">(...)</a>。它突然打破了过渡动画，我不知道为什么。

在行动：一个链接搞砸了！（代码笔）

这家伙似乎有一个解决方案，但我找不到与我的区别：http: //f.cl.ly/items/3r2J2B0j470U0I3t2K3p/logo.svg

任何想法？

编辑：这是某些特定网址上的 Chrome 问题。在 Safari 中运行良好。

Answer 1

我不能说我对这里发生的事情有一个技术解释，但是在遇到同样的确切问题、进行一些广泛的研究并使用上面引用的代码笔之后，看起来使用“http：/ /" 和 "https://" 在您的 xlink:href 属性中。

这将允许 CSS3 过渡完美地工作：

xlink:href="https://www.w3.org"

这将导致转换中断：

xlink:href="http://www.w3.org"

这两个链接将带您到同一个网站。很奇怪，但它对我有用。