svgの範囲がpathに比べてやたらでかい

Question

以下HTMLですが、svgの範囲がpathに比べてやたらでかくなってしまいます。これはどうしたらぴったりにできますか？

表示サンプル

<div class="icon icon-hito"><svg><path d="M0,20 a10,8 0 0,1 20,0z M10,0 a4,4 0 0,1 0,8 a4,4 0 0,1 0,-8" /></svg></div>

試したことというか解決できたのはuseを使う方法です。
しかしそうしたら今度はpathに親要素からのCSS指定できなくなったので、やはりuseは使わない方向で進めていきたいと思っています。

svgの範囲をpathに合わせる方法を、できればノーマルなCSSで知りたいです。夜分すみませんがどなたか宜しくお願いします！

Answer 1

以下のようにviewBoxを指定したうえで、width、heightを好きな大きさに変更してください。

<div class="icon icon-hito">
<svg width = "20" height = "20" viewBox = "0 0 20 20">
<path d="M0,20 a10,8 0 0,1 20,0z M10,0 a4,4 0 0,1 0,8 a4,4 0 0,1 0,-8" />
</svg>
</div>

Comments

[gonsy]

できました。どうもありがとうございます！