偏移SVG填充样式

Question

可以将svg元素中的图案偏移一定量吗？

以下示例使用嵌入在具有x="70"偏移量的<g>元素中的圆形图案。 不幸的是，偏移量仅“切除”了一部分元素，而没有移动填充图案。

 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 。