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>

- Busti

---

我不清楚你想让它看起来像什么。如果需要，您可以通过patternTransform偏移图案。 - Robert Longson

我想在X轴上移动整个图案，而不使其断裂。例如修改“cx”可以移动图形，但这并不完全有效，因为当圆达到其容器的末端时，它们停止渲染。设置“cx =“64””以查看我的意思。 - Busti

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。

- Paul LeBeau