[解決済み] Font AwesomeからSVGを抽出する
2022-11-04 07:04:29
質問
SVGのパスデータを フォント・オーサム グリフから SVG パスデータを取得し、HTML 内で SVG としてそのまま使用できるようにしたいのです。私は、パスデータを fontawesome-webfont.svg からパスデータをコピーペーストするだけで済むと思ったのですが、HTMLで使用するとシンボルがすべて逆さまにレンダリングされてしまいます。どなたか理由をご存じですか?
(参照 フィドル )
Font Awesome SVGです。
<glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />
... HTML SVGに移植されました(そして縮小されました)。
<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>
どのように解決するのですか?
全ては SVG 仕様 ...
初期座標系が下を向いている SVG の標準グラフィックスとは異なり、SVG フォントのデザイングリッドは、グリフの初期座標系とともに、多くの一般的なフォント形式について受け入れられている業界の慣行との一貫性のために、Y 軸が上を向いています。
以下のように
このコメント
, ラッパーを変更することで
<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>
に変更するとうまくいくようです。
ここで
1792
は単位-per-em で
1536
は font-face 要素の上昇値
関連
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] svg要素の色を変更するには?
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み] HTMLのレイアウトにテーブルを使用しない理由は?[クローズド]
-
[解決済み] div内の画像の下に余分なスペースがある
-
[解決済み] HTML5 CanvasとSVGとdivの比較
-
[解決済み】CSSでFont Awesome アイコンを使用する
-
[解決済み】Font AwesomeのアイコンをCSSのコンテンツとして使用する。
-
[解決済み】大きなフォントアウターアイコンでテキストを縦方向にセンタリングする方法は?
-
[解決済み】Font Awesomeが機能せず、アイコンが四角で表示される。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] WebSocketとサーバー送信型イベントの比較/EventSource
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] HTMLのレイアウトにテーブルを使用しない理由は?[クローズド]
-
[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
-
[解決済み] HTML5でminlengthの検証属性はありますか?
-
[解決済み] 残りの幅を埋めるためにdivを展開する