Q&A
「そのまま小さくなるのでなく、幅によって文字サイズを変えたい」の違いがわからないのですが具体的にどのようになればいいのでしょうか？
SVGで縁取りされた文字の大きさを、widthに応じて変えることはできるでしょうか。
以下のサイトを参考にレスポンシブ対応の縁取り文字を作っていまして、
レスポンシブにはなったものの、文字サイズが幅によってかなり読みづらくなってしまいます。
そのまま文字が小さくなるのでなく、縮小が16pxくらいで止まるような形にしたいです。プラス横幅によって改行されるのが理想です
現在のコードは以下になります。
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>無題ドキュメント</title> 6<link rel="stylesheet" href="test.css"> 7</head> 8 9<body> 10<div id="contents"> 11 <h2> 12 <svg viewBox="0 0 960 100"> 13 <text class="huchi" x="50%" y="50%" text-anchor="middle" dominant-baseline="central">テキストを大きくしたい</text> 14 <text class="huchi_x" x="50%" y="50%" text-anchor="middle" dominant-baseline="central">テキストを大きくしたい</text> 15 </svg> 16</h2> 17</div> 18</body> 19</html>
CSS
1@charset "UTF-8"; 2/* CSS Document */ 3 4#contents{ 5 width: 100%; 6 height: auto; 7 background-color:#3C3434; 8 font-size:3.24rem; 9} 10 11#contents h2 svg { 12 display: inline-block; 13 width: 100%; 14 height: 100px; 15 overflow: visible; 16} 17.huchi_x { 18 fill: #01a5da; 19} 20.huchi { 21 stroke: #fff; 22 stroke-width: 8; 23 stroke-linejoin: round; 24}
どうぞよろしくお願いいたします。
回答2件
0
ベストアンサー
widthに応じて変えることはできるでしょうか。
vwを使用してみてはいかがでしょうか。
横幅の変化に応じて文字サイズが自動的に変更されます。
文字サイズが24pxで横幅が640pxの場合の計算方法は下記の通りになります。
24 / 640 × 100 = 3.75vw
lang="javascript"
1font-size: 3.75vw; // viewport width: ビューポートの幅に対する割合
投稿2018/09/29 07:47
退会済みユーザー
総合スコア0
0
svg要素にmin-width: XXXpx;とかってスタイルをあてれば最小の横幅を定めることができます。
それ以上幅が縮みませんので、テキストのサイズもそれ以下にはなりません。
で、もしsvg要素の幅はどこまででも縮んでほしいが、文字サイズは一定以下にならず、はみ出る場合は改行したい、と思っている場合は、残念ながらtextタグを使う場合自動改行してくれないので、JSでわりとややこしい処理を挟む必要があります。
投稿2018/09/28 11:39
総合スコア1803
あなたの回答
tips
プレビュー
