如何在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的需要覆盖适当的字体大小（这是您的解决方案）