如何在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之類的字體庫？

我知道一個事實，當您為圖標選擇相同的網格大小時 ，可以與文本分開放大圖標。 這是因為來自字體文件的圖標在偽元素:before和/或:after上使用CSS。 結合line-height您可以完全控制圖標的大小。 =>線高最好用圖層的height除以font-size 。

例如：24px div / 20px text = 1.2

在我看來，您與問題的X瀏覽器解決方案相距太遠。

• 將您的形狀轉換為字體庫（導入svg文件）
• 從下載中添加正確的CSS（或閱讀readme.txt）
• 確保在服務器上支持.woff
• 在需要的地方使用字體圖標類
• 根據CSS的需要覆蓋適當的字體大小（這是您的解決方案）