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

何か案が？

編集: 特定の URL での Chrome の問題です。Safariでうまく動作します。

Answer 1

ここで何が起こっているかについて技術的な説明があるとは言えませんが、まったく同じ問題が発生し、広範な調査を行い、上記のコードペンで遊んだ後、「http:/ /" および "https://" を xlink:href 属性に追加します。

これにより、CSS3 トランジションが完全に機能します。

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

これにより、トランジションが中断されます。

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

どちらのリンクも同じ Web サイトに移動します。非常に奇妙ですが、私にとってはうまくいきました。