質問: ### 前提・実現したいこと 当初インラインだったSVGをuseタグを用いて表示することになったのですが、同じCSSを指定してもレイアウトが崩れてしまいます。 SVGをuseで読み込んだ部分にCSSを適用したい こちらの質問・回答を読ませて頂き、fillが正しく設定されるのは分かったのですが、レイアウトが崩れる原因は分かりませんでした。 ### 発生している問題・エラーメッセージ レイアウトが崩れる原因となっている要素のコードを載せます。 画像はCodePenで実行した結果です。 期待する結果は、1つ目のように、heightのみを指定すればwidthはアスペクト比を維持するように設定されるというものです。 しかしuseを用いると、画像自体のアスペクト比は維持できているものの、親要素いっぱいまで余白が設定されてしまいます。 ![実行結果](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e20e94a42b3c6aa92eafdfd46bfca513.png) ### 該当のソースコード ``` TEXT TEXT ``` ``` .box { display: flex; width: 300px; height: 50px; border: 1px solid black; } .circle { fill: red; height: 100%; width: auto; } ``` ### 解決策 useだと余白が発生してしまう明確な原因というのは分かりませんでしたが、viewBoxを与えれば意図通りに表示されることが分かったので解決とさせていただきます。 Reactを使用しているので、SVGからuseにidとviewBoxをセットにしたコンポーネントを作成して使用することにしました。 お二方ともありがとうございました。
回答: `viewBox="0 0 10 10"`の有無を揃えて、`class="circle"`の位置を変更すると見た目を揃えることはできました。 (`id="circle"`は``だけに指定するようにもしています。) useを用いるとレイアウトが崩れるというより`viewBox="0 0 10 10"`を指定しないとレイアウトが崩れるのではないか、と思います。 ``` TEXT TEXT ``` !イメージ説明