SVG 图案平铺图像 [英] SVG pattern tiled image

问题描述

我对 SVG 和使用 SVG 创建资产真的很陌生.这是我的第一次尝试，我拥有的是一个圆角矩形，背景是水的 gif.我想知道如何修改此代码以使其没有这些差距.

Hi I am really new to SVG's and creating assets using SVG's. This is my first attempt and what I have is a rounded rectangle with a gif of water as the background. I was wondering how to modify this code in order to make it not have those gaps.

<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>

推荐答案

问题是您的 GIF 是 251x132 像素，但您要求 SVG 以 100x100 绘制图像.

The problem is that your GIF is 251x132 pixels, but you are asking the SVG to draw the image at 100x100.

默认情况下，SVG 不会将图像压缩或拉伸到您要求的大小.它将使图像保持相同的纵横比.因此，在您的情况下，图像被缩小到 100x53，从而在上方和下方留下了空白.

By default SVG won't squeeze or stretch an image to the the size you ask. It will keep the image at the same aspect ratio. So in your case, the image is being scaled down to 100x53, which leaves a blank space above and below.

我认为您不想扭曲水动画，因此解决方案是将您的 和 宽度和高度设置为251x132.

I presume you don't want to distort the water animation, so the solution is to set your <image> and <pattern> widths and heights to 251x132.

<svg id="water" width="440" height="440">
    <defs>
	  <pattern id="img1" patternUnits="userSpaceOnUse" width="251" height="132">
		<image xlink:href="https://i.imgur.com/u7ufQto.gif" x="0" y="0" width="251" height="132" />
	  </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>

这篇关于SVG 图案平铺图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！