SVGアニメーションを制作しているとブラウザ間の挙動の違いで頭が狂いそうになります。

色々と原因を探っていたら結局ブラウザ側のバグでしたなんて事もざらにある。

今回もそんな感じでcircleのstroke-widthが中々思い通りの挙動をしてくれなくて原因を探っていたら見つけた問題。

SVGのviewboxの値の縦幅は横幅より大きいと何故かstroke-widthがバグる

この問題の厄介なところは１つバグってるviewboxがある他のviewboxにまで干渉して同じバグが出るところ。

ChromeではSVGのstroke-widthはviewboxをheight>widthにするとバグる問題。（１）

See the Pen ChromeではSVGのstroke-widthはviewboxをheight&rt;widthにするとバグる問題。（１） by Yuya Saito (@U-YA) on CodePen.0

ChromeではSVGのstroke-widthはviewboxをheight>widthにするとバグる問題。（２）

See the Pen ChromeではSVGのstroke-widthはviewboxをheight&rt;widthにするとバグる問題。（２） by Yuya Saito (@U-YA) on CodePen.0

※埋め込みだと何故かバグらないのでcodepenのサイトで直接見てください・・・。

ほんと意味わからん。