前提・実現したいこと
当初インラインだったSVGをuseタグを用いて表示することになったのですが、同じCSSを指定してもレイアウトが崩れてしまいます。
SVGをuseで読み込んだ部分にCSSを適用したい
こちらの質問・回答を読ませて頂き、fillが正しく設定されるのは分かったのですが、レイアウトが崩れる原因は分かりませんでした。
発生している問題・エラーメッセージ
レイアウトが崩れる原因となっている要素のコードを載せます。
画像はCodePenで実行した結果です。
期待する結果は、1つ目のように、heightのみを指定すればwidthはアスペクト比を維持するように設定されるというものです。
しかしuseを用いると、画像自体のアスペクト比は維持できているものの、親要素いっぱいまで余白が設定されてしまいます。
該当のソースコード
HTML
1<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
2 <symbol viewBox="0 0 10 10" id="circle">
3 <circle cx="5" cy="5" r="5"/>
4 </symbol>
5</svg>
6
7<div class="box">
8 <p>TEXT</p>
9 <svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
10 <circle cx="5" cy="5" r="5"/>
11 </svg>
12</div>
13
14<div class="box">
15 <p>TEXT</p>
16 <svg>
17 <use class="circle" xlink:href="#circle"></use>
18 </svg>
19</div>
CSS
1.box {
2 display: flex;
3 width: 300px;
4 height: 50px;
5 border: 1px solid black;
6}
7
8.circle {
9 fill: red;
10 height: 100%;
11 width: auto;
12}
解決策
useだと余白が発生してしまう明確な原因というのは分かりませんでしたが、viewBoxを与えれば意図通りに表示されることが分かったので解決とさせていただきます。
Reactを使用しているので、SVGからuseにidとviewBoxをセットにしたコンポーネントを作成して使用することにしました。
お二方ともありがとうございました。
Q&A
ベストアンサー
