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

我是SVG新手，我尝试在我创建的形状中添加一些文本。我是这样做的： 但是SVG中的文本会随着polygone的变化而变化。可以保持文本大小不变吗？或者至少控制字母的大小

<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>

我爱SVG！
我爱SVG！

如果不想缩放，为什么需要将文本内容放在SVG中？可能最好将文本放在外部，并使用CSS将其样式设置为您想要的样式。

与其直接在HTML中添加svg，不如使用fontello/icomoon这样的字体库

我知道一个事实，当你为你的图标选择相同的图标时，你可以分别放大你的图标和文本。 这是因为字体文件中的图标在伪元素

：before

和/或

：after

上使用CSS。结合

行高

可以完全控制图标的大小。=>行高最好通过层的

高度

除以

字体大小

来计算

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

在我看来，你离用x浏览器解决你的问题太远了

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

---

我甚至看不到链接上的代码，但是是的，@nicael说的是对的，发布你的代码并更好地解释你的问题。这是代码，我发现小提琴更容易查看pb，但现在你两者都有了！将转换应用于字体getScreenCTM（），将其反转并应用于文本。