SVG-Muster gekachelt Bild

Question

Hallo, ich bin wirklich neu in SVG und Erstellen von Assets mit SVG. Dies ist mein erster Versuch und was ich habe, ist ein abgerundetes Rechteck mit einem gif Wasser als Hintergrund. Ich habe mich gefragt, wie ich diesen Code ändern kann, damit er nicht diese Lücken hat.

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

Das Problem ist, dass Ihr GIF 251x132 Pixel ist, aber Sie die SVG fragen bei 100x100 das Bild zu zeichnen.

Standardmäßig drückt oder streckt SVG ein Bild nicht auf die von Ihnen gewünschte Größe. Es behält das Bild im selben Seitenverhältnis. In diesem Fall wird das Bild auf 100x53 verkleinert, wodurch oben und unten ein leerer Bereich übrig bleibt.

Ich nehme an, dass Sie nicht die Wasseranimation verzerren möchten, also ist die Lösung, Ihre <image> und <pattern> Breiten und Höhen auf 251x132 zu setzen.

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