2017-04-19 14 views
0

これは私を怒らせています。私はIEとEdgeで180度回転した単純な<circle/>がなぜ回転しているのかわかりません。SVGのサークルがIEとエッジで回転しています

ブラウザのバグのように見えますが、そのようにはできません。

これは、ビューポートでのCSS更新の問題にすぎないので、問題を修正できるCSSハックを知っているかもしれません。

証明:あなたがサークルをクリックしたとき - IEでは、エッジではない - それは、通常の回転に戻る(しかし、JSは、円のすべての回転時には影響しません...)

デモ(下段):http://charraire.dev.adelios.fr/notre-organisation/

Chrome/FirefoxとIE/Edgeと比較すると、大きな違いがあります。

誰かが私を助けることができるなら、彼は私の救い主になるだろう!

+0

ここでは、問題を再現する最小限のコードでスニペットを設定する必要があります。そうすれば、助けを求めたり、自分の問題がどこから来たのかを知ることさえできます –

答えて

0

Hehe ...実際に私はjsFiddleをやろうとして解決しました。

実際には、DOMやCSSで宣言されていないと、IEとEdgeがjavascriptでSVGプロパティを更新する際に問題があります。

私は自分自身を説明します。

  • 私はDOMのいくつかの<circle/>の要素を持っており、それらはすべてrcxcy属性を持っています。
  • 私はそれらをstrokestroke-width私のCSSに直接与えます。
  • 次に、javacriptを使用して、stroke-dasharraystroke-dashoffsetを更新します。

しかし、これらの属性をjavascriptで更新すると、IEとEdgeが好きではありません。最初の場所に指定しなかった場合は(なぜか神が知っています)。

私の解決策は、単にstroke-dasharray="0"stroke-dashoffset="0"<circle/>要素に追加することでした。そして魔法!できます!

さらに簡単に言えば、CSSにstroke-dasharray: 0;stroke-dashoffset: 0;を追加しただけです。

他人を助けることを望みます。

関連する問題