Q&A
私もあまり詳しくないのですが、ほとんどのブラウザでサポートされていないように見えました。
https://developer.mozilla.org/ja/docs/Web/SVG/Element/font
#問題点
SVGを埋め込んだサイトを作っているのですが、いくつか問題があります。
0. 高さ、幅の指定が効かない
0. フォントが埋め込めない
HTML
1<!DOCTYPE html> 2 3<html lang="ja"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>タイトル</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 9 </head> 10 11 <body id="top" style="background: #444444;"> 12 <div class="wrapper" style="margin:auto;"> 13 <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewport="0,0,20,20" style="height:50vh; width:100%;"> 14 <defs> 15 <style type="text/css"> 16 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); 17 </style> 18 </defs> 19 <defs> 20 <font id="Font1" horiz-adv-x="1024" vert-adv-y="1024" > 21 <font-face 22 font-family="my-font" 23 font-weight="400" 24 font-stretch="normal" 25 units-per-em="1024" 26 ascent="880" 27 descent="-144" 28 x-height="444" 29 cap-height="682" 30 bbox="0 -144 1023 880" 31 underline-thickness="50" 32 underline-position="-185" 33 /> 34 <missing-glyph 35 /> 36 <glyph glyph-name="A" unicode="A" 37 d="..." /> 38 <glyph glyph-name="B" unicode="B" 39 d="..." /> 40 ... 41 </font> 42 </defs> 43 <circle cx="10" cy="10" r="6" fill="#4dd4da" /> 44 <text font-family="'my-font', sans-serif" font-size="3" x="4" y="10">タイトル</text> 45 <text font-family="'Noto Sans JP', sans-serif" font-size="1.3" x="6" y="13">サブタイトル</text> 46 </svg> 47 <h1 class="box">見出し</h1> 48 49 </div> 50 </body> 51 <style> 52 .wrapper{ 53 height:100vh; 54 display: flex; 55 flex-direction: column; 56 justify-content: space-around; 57 } 58 .box{ 59 width:50%; 60 margin: auto; 61 text-align: center; 62 padding-bottom: 10%; 63 } 64 </style> 65</body> 66</html>
##高さ、幅の指定
高さ、幅の指定が効きません。
指定はstyle属性の「style="height:50vh; width:100%;"」で行っていますが、styleタグに書き込んでも結果は同じでした。
表示領域は確保できているのですが、中身が拡大されません。
svgタグにpreserveAspectRatio="none"、"XMinYMin"などを試しましたが、変化はありませんでした。
##フォントが埋め込めない
fontタグで埋め込んだフォントが適用されず、タイトルはsans-serifで表示されてしまいます。
gryph要素の中身は諸事情により外部に公開できないので、それ以外に問題があるのかどうかを確認して欲しいです。
SVGはつい最近始めたばかりなので、まだよくわかっていません。
何が問題なのか、教えていただけたら幸いです。
よろしくお願いします。
実行テスト環境
OS: mac catalina 10.15.6
ブラウザ: firefox 80.0.1
エディタ: VSCode 1.49.0
ありがとうございます。そもそもサポートされていないということは思いつきませんでした。確かにsafariで見ると想定通りに表示されていました。
他の実装方法を試すことにします。ありがとうございました。
ご解決（ではないかもしれませんが）なによりです。
回答1件
0
自己解決
そもそもfontタグはsafariくらいでしかサポートされていませんでした。
他の実装方法を試します。ありがとうございました。
<font> - SVG: Scalable Vector Graphics | MDN
高さ、幅の指定ができない件については、属性名の間違いでした。
viewportではなくviewboxでした。
投稿2020/09/14 04:10
編集2020/09/14 06:49総合スコア179
あなたの回答
tips
プレビュー
