html - 如何使 SVG 图像动态匹配高度(1em)和周围文本的基线？

Question

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

类似这样的东西(在这种情况下 SVG 图像是 Windows Logo ):

Image 1

Image 2

图像中的上下文可能很清楚；无论页面查看者使用何种字体或字体大小，我都希望 SVG 图像与文本大小相匹配。

如果可能，即使用户使用浏览器的仅缩放文本功能(就像这个)放大页面，它也应该仍然匹配文本的大小:

support.mozilla.org/zh-CN/kb/font-size-and-zoom-increase-size-of-web-pages#w_how-to-only-change-the-size-of-the-text

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

…我意识到在这种情况下使用网络字体实际上可能是最佳解决方案，但如果可以的话我宁愿避免使用它。除了解决问题有点难看之外，它还会产生新的问题，例如:

• 即使我自己创建了网络字体， Logo 的高度也不会(完全)匹配所有现有字体中的 em(尽管，至少，尺寸可能会接近)

• 用户更有可能在图像上屏蔽网络字体

• 等等

Answer 1

天真的答案是将 SVG 的高度设置为 1em。但是，当然，您想要匹配字体的 X 高度，而不是 em 高度。

好消息是 X 高度对于特定字体是一致的，无论它有多大。因此，一旦您找到合适的 em 值来设置 SVG 大小，无论您选择何种字体大小，它都会起作用。

演示

svg.keyicon
{
  width: 0.8m;
  height: 0.8em;
}


.small
{
  font: 24px Arial;
  color: black;
}

.large
{
  font: 36px Arial;
  color: blue;
}

<div class="small">
  Press the 
  <svg viewBox="0 0 100 100" class="keyicon">
    <circle cx="50" cy="50" r="50" fill="currentColor"/>
  </svg>
  key...
</div>


<div class="large">
  Press the 
  <svg viewBox="0 0 100 100" class="keyicon">
    <circle cx="50" cy="50" r="50" fill="currentColor"/>
  </svg>
  key...
</div>