Question

您好我是SVG的新手，并且使用SVG创建资产。这是我的第一次尝试，我所拥有的是一个圆形矩形，以水的GIF为背景。我想知道如何修改此代码，以使其没有这些空白。

<svg id="water" width="440" height="440">
    <defs>
	  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
		<image xlink:href="https://i.imgur.com/u7ufQto.gif" x="0" y="0" width="100" height="100" />
	  </pattern>
    </defs>
	<path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="url(#img1)" stroke="black" stroke-width="3" />
</svg>

Answer 1

问题是你的GIF是251x132像素，但是你要求SVG以100x100的比例绘制图像。

默认情况下，SVG不会将图像挤压或拉伸到您要求的尺寸。它将使图像保持相同的宽高比。因此，在您的情况下，图像缩小到100x53，这会在上方和下方留下空白。

我认为您不想扭曲水动画，因此解决方法是将thread B和<image>宽度和高度设置为251x132。

<pattern>

SVG图案平铺图像

1 个答案: