水平に繰り返すSVGパターン

Question

SVG塗りつぶしで次のCSSをエミュレートできますか？そのアスペクト比は維持している

background-image: url(/* URL */); 
background-position: 50%; 
background-size: auto 100%; 
background-repeat: repeat-x; 

すなわち、背景画像は、そのコンテナと同じ高さを有する中央に配置され、かつ水平に繰り返します。 This JSBinは、私が実装しようとしている動作を示しています。アニメーションを使用して、バックグラウンドが高さの変化にどのように反応するかを示します。

Answer 1

これは難しいことですが、最小限に抑えて、完璧ではありません。一番外側の要素として、htmlの<div>要素を設定しましたが、<svg>要素であってもかまいません。キーポイントは、あなたがoverflow: visibleとインナー<svg>、および<svg>要素のデフォルトになりoverflow: hiddenと外側の要素を（必要があることを覚えておくことです。

@keyframes shrink { 
 
    0% { height: 200px; } 
 
    100% { height: 50px; } 
 
} 
 

 
div { 
 
    animation: 2s ease-in-out 0s infinite alternate shrink; 
 
    border: 1px solid #000; 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
}

<div> 
 
    <svg width="100%" height="100%" viewBox="-0.675 0 0.1 1" 
 
     preserveAspectRatio="xMidYMid meet" overflow="visible"> 
 
    <pattern id="p1" viewBox="0 0 100 80" height="1" width="1.25" 
 
      patternUnits="userSpaceOnUse"> 
 
     <image xlink:href="http://static.jsbin.com/images/dave.min.svg" 
 
      width="100" height="80" /> 
 
     <rect width="100" height="80" fill="none" stroke="brown" /> 
 
    </pattern> 
 
    <rect fill="url(#p1)" x="-500" y="0" width="1000" height="1" /> 
 
    </svg> 
 
</div>

• 繰り返しであります概念的に無限大ではなく、単に非常に長い - 私は1000/1を設定しました。
• コンテナの大きさがsvg viewBoxのアスペクト比よりも高い場合、 viewBoxでまだ内部に収まる。これは、常に両方向にmeetキーワードが適用されているためです。したがって、ビューボックスの幅は小さくする必要がある - 私は、画像のサイズは事前に知られている必要があり、それが4つの場所で使用されている必要があり、1/10
• を設定しました：
  • ザ・<image>幅と高さを明示的に設定する必要がありますが、SVGには「自然なサイズ」という概念はありません。
  • <pattern> viewBox属性をイメージサイズに設定する必要があります。私は画像の境界を説明するために四角形を追加しました。
  • パターンの高さ属性は常に1にする必要がありますが、幅は正しいアスペクト比に設定する必要があります。
  • <svg>のビューボックスが"x 0 ws 1"の値を持ち、wpがパターン幅の場合、x = -(wp/2 + ws) - 私の例ではws=0.1, wp=1.25 => x=-0.675です。