SVGスプライトを使いながら、サイズを親要素に比例させる方法

Question

前提

SVGスプライトを用います。

実現したいこと

親要素のサイズに応じて、SVGのサイズが自動で変わるような機能を実現したいです。

SVGスプライトの問題点

SVGスプライトバージョンにおいて、サイズが自動で変わってくれないのが問題です。

該当のソースコード

比較サンプル → https://jsfiddle.net/zn7ctop9/

<!-- 問題点の説明 -->
<p>上（べた打ちバージョン）<br>
親要素(.left) の width に応じて、<span class="red">SVGのheight</span>が自動で変わってくれる</p>
<p>下（SVGスプライトバージョン）<br>
<span class="red">SVGのheight</span>が自動で変わってくれない</p>

<!-- ベタ打ちバージョン -->
<div class="flex">
  <div class="left">
    <svg class="icon icon-plus" viewBox="0 0 24 24">
        <path d="M5 13h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1z"/>
    </svg>
  </div>
  <div class="right">
    <p>.right</p>
  </div>
</div>

<!-- SVGスプライトバージョン -->
<svg aria-hidden="true" style="position: fixed; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<symbol id="icon-plus" viewBox="0 0 24 24">
			<path d="M5 13h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1z"/>
		</symbol>
	</defs>
</svg>   

<div class="flex">
  <div class="left">
    <svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg>
  </div>
  <div class="right">
    <p>.right</p>
  </div>
</div>

.flex {
    display: flex;
    align-items: center;
    background: #d1d1d1;
    margin: 10px;
}

.left {
    width : 50px;
    border: 1px solid red;
}

.icon {
    width : 100%;
}

.red {
    color : red;
}

試したこと

SVGスプライトバージョンのstyle属性を次のように auto にしてみましたが、変化なしでした。

style="position: fixed; width: 0; height: 0; overflow: hidden;"

↓ auto にしてみました

style="position: fixed; width: auto; height: auto; overflow: hidden;"

Answer 1

サイズを指定していないのが原因だと思いますので、

<svg class="icon icon-plus" viewBox="0 0 24 24"><use xlink:href="#icon-plus"></use></svg>

のようにサイズを指定してはどうでしょうか。

Comments

[kurazushi]

symbolの方にだけあればいいと思い込んでいました！ありがとうございました！

[Lhankor_Mhy]

お役に立てたようで何よりです