SVG塗りつぶしパターンをオフセットする

Question

svgエレメントのパターンを一定量だけオフセットすることはできますか？

以下の例では、<g>要素に埋め込まれている円のパターンが、x="70"のオフセットを使用しています。残念ながら、オフセットは、塗りつぶしパターンを動かすことなく、要素の一部分のみを「切り取る」。

html, body, svg { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<svg class="gFlow" id="main" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <pattern height="64" id="grid" patternunits="userSpaceOnUse" width="64"> 
 
      <circle cx="32" cy="32" fill="orange" r="5"></circle> 
 
     </pattern> 
 
    </defs> 
 
    <rect fill="url(#grid)" height="100%" width="100%" x="70"></rect> 
 
</svg>

Answer 1

パターンをオフセット、長方形をオフセットしないでください。 xとy属性を使用して、パターンの原点（オフセット）を指定することができます。オフセットが正か負かに関係なく、パターンは要素を完全に埋めます。

html, body, svg { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
svg { 
 
    border: solid 1px black; 
 
}

<!-- Pattern with no offset --> 
 
<svg class="gFlow" id="main" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <pattern height="64" id="grid" patternUnits="userSpaceOnUse" width="64"> 
 
      <circle cx="32" cy="32" fill="orange" r="5"></circle> 
 
     </pattern> 
 
    </defs> 
 
    <rect fill="url(#grid)" height="100%" width="100%"></rect> 
 
</svg> 
 

 
<!-- Pattern moved right by half the pattern width (32) --> 
 
<svg class="gFlow" id="main" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <pattern height="64" id="grid" patternUnits="userSpaceOnUse" width="64" 
 
       x="32" y="0"> 
 
      <circle cx="32" cy="32" fill="orange" r="5"></circle> 
 
     </pattern> 
 
    </defs> 
 
    <rect fill="url(#grid)" height="100%" width="100%"></rect> 
 
</svg>

注：SVG属性は、技術的には大文字と小文字が区別されます。それは変化していますが、下位互換性のために正しい大文字小文字を使用する必要があります。 patternunitsはpatternUnitsである必要があります。