Safari 9.1.2（11601.7.7）のSVG遷移が失敗する

Question

テキストと.svgをホバー上の別の色にフェードインしようとしています。

a{ 
 
    color: #ff0000; 
 
    display: inline-block; 
 
    margin: 0 0 0 1em; 
 
    text-decoration: none; 
 
    text-transform: lowercase; 
 
    transition: color 1s linear; 
 
} 
 
a:hover{ 
 
    color: #000; 
 
} 
 
svg{ 
 
    vertical-align: middle; 
 
    width: 2em; 
 
} 
 
path{ 
 
    transition: fill 1s linear; 
 
    fill: #ff0000; 
 
} 
 
a:hover path{ 
 
    fill: #000; 
 
}

<a href="http://example.com" class="tweet-this"> 
 
    <i class="icon icon-twitter"> 
 
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>twitter</title><path d="M24.679 10.658c-.651.281-1.35.471-2.083.556.749-.437 1.324-1.13 1.595-1.955-.701.405-1.477.699-2.303.858-.662-.687-1.604-1.116-2.647-1.116-2.003 0-3.627 1.582-3.627 3.535 0 .277.032.546.094.805-3.014-.147-5.687-1.554-7.476-3.693-.312.522-.491 1.129-.491 1.777 0 1.226.64 2.308 1.614 2.942-.594-.018-1.154-.177-1.643-.442v.045c0 1.712 1.25 3.141 2.909 3.466-.304.081-.625.124-.956.124-.234 0-.461-.022-.682-.063.462 1.404 1.801 2.426 3.388 2.455-1.241.948-2.805 1.513-4.505 1.513-.292 0-.581-.017-.865-.049 1.605 1.003 3.512 1.588 5.56 1.588 6.671 0 10.32-5.385 10.32-10.056l-.01-.457c.709-.498 1.323-1.121 1.81-1.829" fill="#fff"></path></svg> 
 
    </i> 
 
    Tweet this 
 
</a>

の.svgの移行は、Safariでは発生しませんが、それはChromeとFirefoxで行います。

This answerは、私が持っている開始色と終了色が必要であると述べています。

どのようにSafariでも移行作業を行うことができますか？

Answer 1

私はarticle on rrott.com titled "Bug with CSS transition animation for SVG in Safari."

ジューシービットを指摘した。

私は遷移はすべて訪問済みリンク の作動が停止すると、それは私が再現することができませんでした理由かもしれないことがわかりました1台のマシンで別のマシンで障害が発生している間に を発行してください。

と

悲しいこと

、変更は：CSSで擬似を訪問しただけでなく、のxmlnsを使用して：SVGの内部XLINK は、遷移が再び働くことはありませんし、そこには ハッキングはありません。

記事はまた、可能な解決策の数一覧表示されます：

私はそこにいくつかのソリューションを参照してくださいしかし、残念ながら、それらのどれも十分 ません：

1. は、いくつかのランダムなデータを追加しますリンクには（のように見える/ timestampのようなものがありますが、そのリンクは常にユーザーには表示されません）。

2. リンク内にアニメーションとインラインSVGを使用しないでください。

3. 位置とZ-インデックスを使用してSVG画像の上にリンクを置くと、画像は 「クリックジャック」になります。それは動作しますが、 イメージのホバーイベントをホバーアニメーションで緩まないように処理するための追加のjsコードが必要です。 Jquery ロゴのクリックやwindow.locationの変更を処理するコードを追加します。

4. Safariの場合、リンクの外でSVGを動的に移動します。

5. Safariユーザーの数が少ない場合はそのままにしてください。

私は今の数5で行きますよ。