0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SafariでSVGの端が欠ける

Posted at

事象

SafariでSVGの端が欠ける。
iOS/Macどちらでも発生する。
Safari以外は大丈夫。
同じSVG、同じスタイルでも使われている場所によって欠けたり欠けなかったりする。
元のSVGを適当なビューアで見ても欠けているわけではない。
Illustratorで線の位置を外側にしてしまって、外側にはみ出した分欠けているとかではない。

原因

SafariはSVGタグに

overflow-x: hidden;
overflow-y: hidden;

というスタイルをデフォルトで当てている。
(つまりimgタグで読み込んだSVGではこの事象は発生しない)
何かの拍子にSVGタグのボックス内をはみ出した場合、その部分が欠けてしまう。

対策

CSSでSVGタグのoverflow: hiddenを打ち消す。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?