SVG模式平铺图像

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，在上方和下方都留有空白。

我想您不想扭曲水上动画，因此解决方案是将<image>和<pattern>宽度和高度设置为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>