我将如何移动带有元素的 SVG 模式

How would I move an SVG pattern with an element

本文关键字：元素 模式 SVG 移动 何移动      更新时间：2023-09-26

我创建了这里看到的svg模式：

<pattern id="t" height="20" width="20" patternUnits="userSpaceOnUse" overflow="visible">
    <ellipse cx="0" cy="0" rx="20" ry="20" fill="white"/>
    <ellipse cx="5" cy="5" rx="15" ry="15" fill="yellow"/>
    <ellipse cx="10" cy="10" rx="10" ry="10" fill="blue"/>
    <ellipse cx="15" cy="15" rx="5" ry="5" fill="red"/>
</pattern>

然后在我的脚本中，我创建了一个使用该模式的椭圆。 问题是，当我移动椭圆时，图案会静止在椭圆后面，而不是随椭圆一起移动。

如何配置模式以保留元素？

您需要使用 patternContentUnits="objectBoundingBox" 单击此示例中的矩形以查看： http://jsfiddle.net/longsonr/x8nkz/

将 patternContentUnits 更改为 "objectBoundingBox" （vs. userSpaceOnUse）。

更多：patternUnits应该对模式的布局方式没有影响，只有它的尺寸（用户空间单位与边界框单位）。 patternContentUnits是您要设置为"objectBoundingBox"的属性 - 请注意，如果您更改边界框的大小，这将缩放您的模式。如果您不希望发生这种情况，则需要在模式上使用 viewbox 属性 - 这可能是获得您可能正在寻找的结果的正确方法（固定大小的图案，相对于其边界框定位）

（另请注意，根据规范（又名）将溢出设置为可见会导致"未定义"渲染 - 不是您想要做的事情）

相关文章：