如何将SVG模式与元素一起移动 [英] How would I move an SVG pattern with an element

问题描述

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

I created the svg pattern seen here:

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

然后在我的脚本中创建一个使用该模式的椭圆.问题是，当我移动椭圆时，图案仍然停留在其后面，而不是随椭圆一起移动.

Then in my script I created an ellipse that uses the pattern. The problem is, when I move the ellipse around, the pattern stays still behind it instead of moving with the ellipse.

如何配置模式以使其与元素保持一致?

How do I configure the pattern to stay with the element?

推荐答案

我相信您需要将patternUnits更改为"objectBoundingBox"与userSpaceOnUse.这应该为您解决问题.

I believe you need to change the patternUnits to "objectBoundingBox" vs. userSpaceOnUse. This should fix things for you.

更新:

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

This answer was not correct - patternUnits should have no effect on how the pattern is laid out, only its dimensions (userspace units vs. boundingbox units). patternContentUnits is the attribute that you want to set to "objectBoundingBox" - note that that this will then scale your pattern if you change the size of the bounding box. If you don't want this to happen, then you need to use a viewbox attribute on your pattern - which is probably the right way to get the result you're probably looking for (fixed size pattern, positioned relative to its bounding box)

(还请注意，根据规范将溢出设置为可见会导致未定义"渲染，这不是您想要执行的操作)

(Also please note that setting overflow to visible results in "undefined" rendering according to the spec aka - not something that you want to do)

这篇关于如何将SVG模式与元素一起移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！