1

HTMLのグリフィコンと同じようにsvgで動作することは可能ですか?

インライン svg を現在のフォント サイズにスケーリングし、現在の色/背景色を使用することを意味しますか?

あとがき:「svg-glyph」のサイズを「1em」で操作することは可能ですが、1 em は少し不適切な値であることに注意してください。大文字より大きく、行の高さより小さくなります。 

span { 
  fill:gold;
  font-size:24px;
  color: green;
  background-color: Lavender;
}

span > svg { 
   display:inline-block;

   width:1em;  
}
<div>
<span>
    1 em Baseline Align: 
  <svg viewBox="0 0 100 100" style="vertical-align:baseline">
    <rect height="100" width="100"        fill="none" stroke="currentColor"  stroke-width="15" />
   </svg>
</span>
</div>

<div>
<span>
1 em Text bottom Align: 
  <svg viewBox="0 0 100 100" style="vertical-align:text-bottom">
    <rect height="100" width="100"  fill="none" stroke="currentColor"  stroke-width="15" />
   </svg>
</span>
</div>

<div>
<span>
0.75em Baseline Align: 
  <svg viewBox="0 0 100 100" style="vertical-align:Baseline; width:0.75em; height:0.75em;">
    <rect height="100" width="100"  fill="none" stroke="currentColor"  stroke-width="20" />
   </svg>
</span>
</div>

どういうわけか、html から fill と viewport を継承できるはずですが、方法がわかりません。

PS javascript で可能であるはずですが、javascript ソリューションを使用しないままにしておきます。

4

1 に答える 1

2

現在の font-size へのスケーリングは非常に簡単です - em 単位です。

塗りつぶし/ストロークは、デフォルトで継承可能な CSS プロパティです。

span { 
  fill:gold;
  font-size:24px;
}

span > svg { 
   display:inline-block;
   vertical-align:middle;
   width:1em;  
}
<span>
Text: 
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" />
</svg>
 </span>

文字色の継承

SVG でテキストと同じ色を使用するには、特別な色の値「currentColor」を使用します。

span { 
  color:gold;
  font-size:24px;
}

span > svg { 
   height:1em;  
}
<span>
Text: 
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="currentColor" />
</svg>
and more text
 </span>

于 2016-06-10T18:56:06.557 に答える