svgで一定のフォントサイズを維持する方法

Question

私はSVGで新しく、作成した図形にテキストを追加しようとしています。私は次のようにしました：https://fiddle.jshell.net/30kL3mzt/ しかし、SVGのテキストはポリゴンと共に変わります。テキストのサイズを一定に保つことは可能ですか？または少なくとも文字のサイズを制御するには？

<div id="tab"> 
    <div class='chevron'> 
     <svg width="25%" height='100%' viewBox="0 0 20 20" preserveAspectRatio="none"> 
     <polygon fill=steelblue stroke-width=0 
        points="0,0 2,10 0,20 18,20 20,10 18,0" /> 
     <text x="0" y="10" font-family="Verdana" font-size="2" >I love SVG!</text> 
     </svg> 
    </div> 
</div> 
<div id="middle"> 
      <svg width="25%" height='100%' viewBox="0 0 20 20" preserveAspectRatio="none"> 
     <polygon fill=steelblue stroke-width=0 
        points="0,0 2,10 0,20 18,20 20,10 18,0" /> 
     <text x="0" y="10" font-family="Verdana" font-size="2" >I love SVG!</text> 
     </svg> 
</div> 

Answer 1

拡大縮小したくない場合は、なぜテキストコンテンツをSVGに入れる必要がありますか？おそらく、テキストを外部に持ち、CSSでそれをスタイルして、それを望む場所にする方がよいでしょう。

Answer 2

あなたのHTMLの中に直接svgを追加するのではなく、fontello/icomoonのようなフォントライブラリを使用してみませんか？

あなたのアイコンに同じgrid sizeを選択すると、テキストとは別にアイコンを拡大することができます。 これは、フォントファイルのアイコンが、擬似要素:beforeおよび/または:afterでCSSを使用するためです。 line-heightと組み合わせると、アイコンのサイズを完全に制御できます。 =>線の高さは、font-sizeで分けられた層のheightによって最もよく計算されます。例えば

：は24px DIV/20ピクセルテキスト= 1.2

私の意見では、あなたはあまりにも遠く、あなたの問題へのxブラウザ溶液からです。

• サーバー
• に.woffをサポートすることを確認してください
• はダウンロードから適切なCSSを追加（またはREADME.TXTを読んで）（輸入SVGファイル）フォントライブラリにあなたの形状を変換します@nicaelは私の言うこと
• オーバーライドCSSであなたのニーズに適切なフォント・サイズ（あなたのソリューションがあります）