Html 如何使SVG图像动态匹配高度（1em）和周围文本的基线？

是否可以动态调整SVG图像的大小（使用HTML或CSS）以匹配周围文本的基线和高度

类似这样的内容（在这种情况下，SVG图像是Windows徽标）：

从图像中可以清楚地看到上下文；我希望SVG图像与文本大小相匹配，而不管页面查看器使用的是什么字体或字体大小

如果可能，即使用户使用浏览器的“仅缩放文本”功能（如下图所示）缩放页面，也应与文本大小匹配：

support.mozilla.org/en-US/kb/font-size和zoom增加网页大小#w#u how-to-only-change-the-size-of-the-text

我认为，实际上，我希望浏览器将SVG图像视为文本

…我意识到在这种情况下，使用web字体实际上可能是最佳的解决方案，但如果我能帮上忙，我宁愿避免使用它。除了有点丑陋的问题解决方案外，它还产生了新的问题，如：

• 即使我自己创建web字体，徽标的高度也不会（精确地）匹配现有的每种字体中的em（尽管，至少，大小可能很接近）

• 用户很可能会在图像上屏蔽网页字体

• 等等

---

简单的答案是将SVG的高度设置为

1em

。但是，当然，您希望匹配字体的X高度，而不是em高度
好消息是，对于特定字体，X高度是一致的，不管它有多大。因此，一旦您找到正确的em值来设置SVG大小，它将适用于您选择的任何字体大小
演示

svg.keycon
{
宽度：0.8m；
高度：0.8em；
}
小的
{
字体：24px Arial；
颜色：黑色；
}
.大
{
字体：36px Arial；
颜色：蓝色；
}

按
钥匙
按
钥匙