SVGのviewboxをheight>widthにするとstroke-widthがバグる

SVGのviewboxをheight>widthにするとstroke-widthがバグる

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

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

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

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

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

ChromeではSVGのstroke-widthはviewboxをheight>widthにするとバグる問題。(1)

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

ChromeではSVGのstroke-widthはviewboxをheight>widthにするとバグる問題。(2)

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

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

ほんと意味わからん。

SVGのviewboxをheight>widthにするとstroke-widthがバグる」への3件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です