SVGパターンタイル画像

Question

こんにちは、私は本当にSVGの新機能で、SVGを使ってアセットを作成しています。 これは私の最初の試みで、私はバックグラウンドとして水のgifを持つ丸い四角形です。これらのギャップがないようにするために、このコードを変更する方法を知りました。

<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

問題は、あなたのGIFは251x132ピクセルであるということですが、あなたは100×100の画像を描画するSVGを求めています。

デフォルトでは、SVGはイメージをあなたが求めるサイズに絞ったり伸ばしたりしません。画像を同じアスペクト比に保ちます。あなたのケースでは、イメージは100x53に縮小されています。これにより上下の空白が残ります。

水アニメーションを歪ませたくないので、<image>と<pattern>の幅と高さを251x132に設定することをお勧めします。

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