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>。它突然打破了过渡动画，我无法弄明白为什么。

行动中：a link mess it up! (CodePen)

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

有什么想法吗？

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

Answer 1

我不能说我对这里发生的事情有一个技术性的解释，但是在遇到同样的问题，做了一些广泛的研究，并且使用上面提到的codepens之后，看起来使用“之间存在差异”你的xlink：href属性中的http：//“和”https：//“。

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

的xlink：HREF = “https://www.w3.org”

这将导致转换中断：

的xlink：HREF = “http://www.w3.org”

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

<a> link breaks SVG transition</a>

1 个答案: