我在 Illustrator 中设计了一个形状，并修剪了画板的形状，因此没有外部空白。为了确定，我已经这样做了两次。
当我在 Chrome 中打开它并检查时。如果我将鼠标悬停在整个 SVG 标签上，它就会紧贴形状。如果我将鼠标悬停在路径上，则会留下空白/填充(实际上是顶部) - 请参见屏幕截图。
这意味着当我放置形状或设置形状动画时，它是不正确的。我不知道如何摆脱它 - 有什么想法吗？
代码:
<div style="margin:100px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.144 210.706">
<path fill="#444" d="M78.394 210.706c-11.247-13.16-22.162-25.304-32.368-38.017-16.016-19.95-30.158-41.092-39.98-64.948-19.25-46.76 9.943-94.135 52.535-105.196 45.651-11.856 91.876 19.016 97.966 65.671 2.028 15.534-1.288 29.968-7.385 44.017-11.15 25.692-27.51 48.023-45.258 69.398-7.965 9.593-16.436 18.766-25.51 29.075zm52.722-131.714c.046-29.268-23.232-52.857-52.283-52.982-28.984-.125-52.775 23.526-52.815 52.506-.041 29.231 23.339 52.858 52.341 52.895 29.291.038 52.712-23.233 52.757-52.419z"/>
</svg>
</div>
最佳答案
Chrome 似乎在绘制边界框时考虑了控制点:
您可以通过重新排序控制点来避免这种情况，这会为您的图钉创建更好的形状:
这是路径，但我画得很快，您可能需要更仔细地自己重新绘制它。
<path d="m78.394,211.00938c-11.247,-13.16 -22.162,-25.304 -32.368,-38.017c-16.016,-19.95 -44.72017,-56.5643 -45.74419,-94.98246c-1.02402,-38.41816 32.67117,-77.86771 78.32217,-77.89195c45.651,-0.02424 78.27532,41.16539 78.54978,79.92979c0.27446,38.7644 -35.50176,80.51162 -53.24976,101.88662c-7.965,9.593 -16.436,18.766 -25.51,29.075zm52.722,-131.714c0.046,-29.268 -23.232,-52.857 -52.283,-52.982c-28.984,-0.125 -52.775,23.526 -52.815,52.506c-0.041,29.231 23.339,52.858 52.341,52.895c29.291,0.038 52.712,-23.233 52.757,-52.419z" fill="#444"/>
关于css - 一种带有神秘左填充/空白的路径/形状 SVG。不是画板。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44327536/