画像などの <use> 要素を使用して SVG アイコンのサイズを変更する方法

Question

私の HTML ドキュメントには、icon-xid 属性を持つ多くの項目が含まれる があります。

それでは、これらのアイコンを

のように再利用したいと思います リーリー

ただし、この例のアイコンは、ソース SVG ではサイズが異なる場合があります。 div.container に収まるようにしたいのですが、コンテナ内の svg の周囲には空白が必要です。

何かをポイントしていて、そのものが のサイズを定義していることをどのように伝えることができますか。そのため、 のような CSS を実行すると、 .container svg { width: 100%; height: auto;} タグと同じように機能しますか?

Answer 1

1. icon-x viewBox 属性を持つシンボルまたはネストされた svg

   である必要があります

2. icon-x を使用する場合、 要素に width および height を指定できます。 に異なる位置 (x および y 属性) や異なるパディングを指定することもできます。

次の例では、 を使用します。必要に応じて、ネストされた svg を使用できます。この場合、

に置くとよいでしょう。

リーリー リーリー