时间戳

首页 > 解决方案 > 如何编辑 SVG 以删除形状周围的空白空间？

html - 如何编辑 SVG 以删除形状周围的空白空间？

问题描述

我有这个排名第一的 SVG。

我希望内部的路径元素扩展以填充整个 SVG 元素，这样我就可以将其视为普通图像（但使用矢量缩放），但它的行为非常笨拙，我必须使 SVG 变得非常大。

<svg fill="#000" viewBox="0 180 600 600">
  <path d="M10.125 286.1719 Q10.125 243.7031 40.4297 213.2578 Q70.7344 182.8125 113.4844 182.8125 Q156.0938 182.8125 186.4688 213.2578 Q216.8438 243.7031 216.8438 286.1719 Q216.8438 329.3438 186.3984 359.6484 Q155.9531 389.9531 113.4844 389.9531 Q70.875 389.9531 40.5 359.5781 Q10.125 329.2031 10.125 286.1719 ZM131.625 356.7656 L131.625 213.3281 L109.4062 213.3281 Q104.625 226.9688 91.3359 236.8828 Q78.0469 246.7969 68.7656 249.6094 L68.7656 274.3594 Q89.5781 267.4688 104.2031 253.6875 L104.2031 356.7656 L131.625 356.7656 Z"/>
</svg>

标签： htmlsvg

解决方案

我建议阅读有关其viewBox工作原理的内容。

但简而言之，它描述了 SVG 的内容所占据的坐标空间区域。这四个值是 minX、minY、width 和 height。以该顺序。

您的 minX 和 minY 是合理的，但是您的宽度和高度值太大了。在下面的示例中，我已将它们从 600 减少到 220。如果您需要更紧密的配合，您可以进一步调整这些值。IE。稍微增加 minX 和 minY，并减少宽度和高度。

svg {
  background-color: red;
}
<svg fill="#000" viewBox="0 180 220 220">
  <path d="M10.125 286.1719 Q10.125 243.7031 40.4297 213.2578 Q70.7344 182.8125 113.4844 182.8125 Q156.0938 182.8125 186.4688 213.2578 Q216.8438 243.7031 216.8438 286.1719 Q216.8438 329.3438 186.3984 359.6484 Q155.9531 389.9531 113.4844 389.9531 Q70.875 389.9531 40.5 359.5781 Q10.125 329.2031 10.125 286.1719 ZM131.625 356.7656 L131.625 213.3281 L109.4062 213.3281 Q104.625 226.9688 91.3359 236.8828 Q78.0469 246.7969 68.7656 249.6094 L68.7656 274.3594 Q89.5781 267.4688 104.2031 253.6875 L104.2031 356.7656 L131.625 356.7656 Z"/>
</svg>

添加了红色背景只是为了让您可以更好地看到边距。

推荐阅读