<a> 链接断开 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>。它突然打断了过渡动画，我不明白为什么。

实际操作：一个链接把它搞砸了！（CodePen）

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

知道吗？

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

Answer 1

我不能说我对这里发生的事情有一个技术解释，但在遇到同样的问题、做了一些广泛的研究并使用了上面提到的代码笔之后，在xlink:href属性中使用"http://"one_answers"https://"似乎有区别。

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

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

这将导致转换中断：

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

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