Question

我有第一的SVG。

我希望内部的path元素扩展以填充整个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>

Answer 1

我建议阅读viewBox的工作原理。

但是简要地，它描述了SVG内容所占据的坐标空间区域。这四个值分别是minX，minY，宽度和高度。按此顺序。

您的minX和minY合理，但是宽度和高度值太大。在下面的示例中，我将其从600减少到220。如果需要更紧密的配合，则可以进一步调整值。就是稍微增加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>

添加了红色背景只是为了更好地查看页边距。

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

1 个答案: