SVG image の角を丸める

概要

HTML では、選択したDOM要素に対し、CSSborder-radius: XXpx; とすれば、対象の角を丸めることが可能です。
SVG でも、rect 要素の rxry を指定すると css の定義と同じように角を丸めることができます。
ただ、今後見直されるかもしれませんが、image 要素には rxry オプションが使用できないようです。
やりたいのは image 要素の角を丸めること。

HTML の場合

HTMLDOM 要素の角を丸めることは、CSS で定義可能です。
pikaboo

SVG の場合

rect を丸める

rect 要素の角を丸める方法は、以下の通り、オプションでサポートされています。

imageを丸める

今の所、一番楽かな?と思うのは clipPath を使用して、角の丸まった rect でクリッピングすることですかね。
他にもっといい方法を見つけたらアップデートしたいと思います。

コメントを残す

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