Question

是否可以将svg元素中的模式偏移一定量？

下面的示例使用嵌入<g>元素中的圆圈图案，该元素具有x="70"偏移量。不幸的是，这种偏移只会削减＆＃39;离开一部分元素而不移动填充图案。

＆＃13;

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

＆＃13;

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

＆＃13;

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。

抵消SVG填充模式

1 个答案: