質問: SVGで縁取りされた文字の大きさを、widthに応じて変えることはできるでしょうか。 以下のサイトを参考にレスポンシブ対応の縁取り文字を作っていまして、 レスポンシブにはなったものの、文字サイズが幅によってかなり読みづらくなってしまいます。 参考サイト そのまま文字が小さくなるのでなく、縮小が16pxくらいで止まるような形にしたいです。プラス横幅によって改行されるのが理想です 現在のコードは以下になります。 ``` 無題ドキュメント テキストを大きくしたい テキストを大きくしたい ``` ``` @charset "UTF-8"; /* CSS Document */ #contents{ width: 100%; height: auto; background-color:#3C3434; font-size:3.24rem; } #contents h2 svg { display: inline-block; width: 100%; height: 100px; overflow: visible; } .huchi_x { fill: #01a5da; } .huchi { stroke: #fff; stroke-width: 8; stroke-linejoin: round; } ``` どうぞよろしくお願いいたします。
回答: > > widthに応じて変えることはできるでしょうか。 > > > `vw`を使用してみてはいかがでしょうか。 横幅の変化に応じて文字サイズが自動的に変更されます。 文字サイズが24pxで横幅が640pxの場合の計算方法は下記の通りになります。 `24 / 640 × 100 = 3.75vw` ``` font-size: 3.75vw; // viewport width: ビューポートの幅に対する割合 ```