<a> 链接中断 SVG 过渡答案

【问题标题】：<a> link breaks SVG transition<a> 链接中断 SVG 过渡
【发布时间】：2013-07-24 07:48:20
【问题描述】：

我实际上遇到了一个关于 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>。突然打断了转场动画，不知道是什么原因。

实际操作中：a link mess it up! (CodePen)

这家伙好像有办法，但我找不到和我的区别：http://f.cl.ly/items/3r2J2B0j470U0I3t2K3p/logo.svg

有什么想法吗？

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

【问题讨论】：

哪些浏览器搞砸了？我可以将鼠标悬停在codepen.io/kimchouard/full/JcBtI 上的两个岛上，然后会发生一些过渡。顺便说一句，我在 Chrome 28.0.1500.72 中（这可能是一个旧版本，因为这台机器已经有一段时间没有打开了）。
在您提供的解决方案链接中，它的行为非常不同——它的颜色保持不变，直到您将鼠标移出窗口本身，而不仅仅是图像。运行 chrome 版本 28.0.1500.72 m
我使用的是 Chrome 28.0.1500.71，你是对的，它正在工作。最后，它甚至比这更奇怪。是href本身使动画中断... 回头看看链接codepen.io/kimchouard/pen/JcBtIo.O
@KimC。嘿！有同样的问题，但它也发生在 Safari 和 Firefox 中。你找到解决办法了吗？

标签： svg css-transitions

【解决方案1】：

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

这将使 CSS3 过渡完美地工作：

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

这将导致转换中断：

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

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

【讨论】：