使用SCSS mixin查找SVG图标的真实（光学）中心

所以我读了这篇非常有趣（准确）的文章，关于播放按钮从不以光学方式居中-

读完这篇文章后，我想尝试创建一个mixin，它将始终找到图标的实际中心，无论图标的形状如何。但是这比我想象的要复杂得多，所以来这里寻求帮助吧

注意：目前我正在将所有svg图标传递到一个字体文件中，该文件包含一些基本样式，例如：

font-family:"IconFont";
display:inline-block;
vertical-align:middle;
line-height:1;
font-weight:normal;
font-style:normal;
speak:none;
text-decoration:inherit;
text-transform:none;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;

任何帮助或指导都将不胜感激

最好的，

---

Artem

这是一个有趣的问题，但就目前的情况来看，我认为这个问题可能过于宽泛，无法给出一个好的答案。你的混音有什么特别的问题吗？不是特别的。现在，我们正在通过生成的web字体传递所有图标，这在某些情况下很好，但在另一些情况下很麻烦。因此，对于播放按钮的例子，由于容器的中心不是实际的光学中心，我们需要添加其他填充物，并进行调整，使其光学中心，看起来很漂亮。但是，如果你想在不进行手动调整的情况下计算中心，那么，我觉得你可能需要在Sass中添加一些来处理计算的主要问题，因为我怀疑内置函数是否足以满足你的需要。您可以集成一些Ruby库来处理SVG解析（比如可能）。但是如果没有答案，我认为这个问题将会（而且应该）被解决。。。