我正在尝试学习如何正确处理现有的 svg，以便将其与文本对齐。
这就是我目前（可能是天真地）理解事物的方式：
viewport - 我可以在屏幕上看到的画布区域，由 svg 标签或 css 中的宽度/高度属性设置。
viewBox - 定义该视口内的平移和缩放。
通常，您的 svg 高度/宽度似乎应该与您的 viewBox 匹配，但以下 example 让我认为矢量本身的大小（或我猜的路径）很重要。因为我设置了它的大小，所以我操纵圆圈没有问题。
我是否只需要微调图标的 viewBox 直到它居中且大小正确？或者有没有更好的方法我不知道？
谢谢！
【问题讨论】：
我不太确定我是否理解您的问题。也许这有帮助：在 JavaScript 中有一个方法getBBox()，它返回包围当前元素的矩形的大小和位置。
在你的例子中，如果我把它放在 JavaScript 中：
let thepath = document.querySelector("path");
console.log(thepath.getBBox());
我收到SVGRect {x: 0, y: 1, width: 15, height: 15}。这是图标的大小和位置。
您可以通过更改 viewBox="-42.5 -42 100 100" 或使用 CSS 翻译图标来使图标居中：path{transform:translate(42.5px,42px)
【讨论】：
document.querySelector('svg.icon') 来获取整个图标的内容。
viewBox="0 1 15 15" :)