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

为什么不使用像fontello / icomoon这样的字体库，而不是直接在HTML中添加svg？

我知道，当您为图标选择相同的grid size时，您可以将文字与文字分开放大。这是因为字体文件中的图标在伪元素:before和/或:after上使用CSS。结合line-height，您可以完全控制图标的大小。 =＆GT;行高最好通过图层的height除以font-size来计算。

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

在我看来，你与x-browser解决方案相距太远了。

将您的形状转换为字体库（导入svg文件）
从下载中添加适当的CSS（或阅读readme.txt）
确保在服务器上支持.woff
在需要的地方使用字体图标类
根据您的需要覆盖正确的字体大小（这是您的解决方案）

如何在svg中保持一个恒定的字体大小

2 个答案: