如何编辑SVG以删除形状周围的空白空间？
[英]How do I edit an SVG to remove the empty space around the shape?
问题描述
I have this SVG of the number one. 
我有第一的SVG。
I want the path element inside to expand to fill up the whole SVG element so I can treat it like a normal image (but with the vector scaling), but it behaves very awkwardly and I have to make the SVG really big. 我希望内部的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>
1 个解决方案
解决方案1
1 已采纳 2018-08-14 08:41:33
I recommend reading up on how the viewBox works. 我建议阅读有关viewBox如何工作的信息。
But briefly, it describes the area of the coordinate space that the contents of the SVG occupy. 但简单来说，它描述了SVG内容所占据的坐标空间区域。 The four values are minX, minY, width, and height. 这四个值分别是minX，minY，宽度和高度。 In that order. 以该顺序。
Your minX and minY were reasonable, but your width and height values were way too big. 您的minX和minY合理，但是宽度和高度值太大。 I've reduced them from 600 to 220 in my example below. 在下面的示例中，我将其从600减少到220。 If you need a tighter fit, you can tweak the values further. 如果需要更紧密的配合，则可以进一步调整值。 Ie. IE浏览器。 increase minX and minY a bit, and reduce width and height a bit. 稍微增加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>
The red background was added just so you can see the margin better. 添加红色背景只是为了更好地查看页边距。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.