Question

是否可以减小剪裁的实际尺寸（即宽度和高度）？让我们看一下下面的svg：

基础＆＃34;基地＆＃34;图片大小为272x136像素。剪切结果的大小为17x17像素。现在我希望生成的svg大小调整为17x17像素。这甚至可能吗？

＆＃13;

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<clipPath id="cut-off-bottom">
			<rect x="102" y="102" width="17" height="17"/>
		</clipPath>
	</defs>
	<image xlink:href="https://openmaptiles.github.io/osm-bright-gl-style/sprite.png" clip-path="url(#cut-off-bottom)" />  
</svg>

＆＃13;

Answer 1

使用viewBox选择要查看的区域，然后使用外部<svg>元素的宽度和高度将SVG的大小设置为您想要的任何内容

我还为图像元素添加了宽度和高度属性，因此它适用于Chrome / Opera以外的浏览器。

<svg width="17px" height="17px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="102 102 17 17">
        <defs>
                <clipPath id="cut-off-bottom">
                        <rect x="102" y="102" width="17" height="17"/>
                </clipPath>
        </defs>
        <image xlink:href="https://openmaptiles.github.io/osm-bright-gl-style/sprite.png" clip-path="url(#cut-off-bottom)" width="272px" height="136px" />
</svg>

如何将svg大小减少到剪裁区域？

1 个答案: