一个路径/形状SVG与神秘的左填充/白色空间。不是画板。

Question

我在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>

Answer 1

在绘制边界框时，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"/>