事象
SafariでSVGの端が欠ける。
iOS/Macどちらでも発生する。
Safari以外は大丈夫。
同じSVG、同じスタイルでも使われている場所によって欠けたり欠けなかったりする。
元のSVGを適当なビューアで見ても欠けているわけではない。
Illustratorで線の位置を外側にしてしまって、外側にはみ出した分欠けているとかではない。
原因
SafariはSVGタグに
overflow-x: hidden;
overflow-y: hidden;
というスタイルをデフォルトで当てている。
(つまりimgタグで読み込んだSVGではこの事象は発生しない)
何かの拍子にSVGタグのボックス内をはみ出した場合、その部分が欠けてしまう。
対策
CSSでSVGタグのoverflow: hiddenを打ち消す。