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

Question

我创建了如下所示的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>

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

如何将模式配置为与元素保持一致？

Answer 1

将patternContentUnits更改为"objectBoundingBox“(vs. userSpaceOnUse)。

更多: patternUnits应该对模式的布局没有影响，只影响它的尺寸(用户空间单位与边界框单位)。patternContentUnits是您想要设置为"objectBoundingBox“的属性-请注意，如果您更改边界框的大小，这将缩放您的模式。如果你不想发生这种情况，那么你需要在你的pattern上使用viewbox属性--这可能是获得你想要的结果的正确方法(固定大小的pattern，相对于它的边界框定位)

(还请注意，将overflow设置为visible会导致根据规范(也称为“规范”)呈现“未定义”-这不是您想要做的事情)

Answer 2

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

Answer 3

How to make SVG image pattern fill move with object?的副本

通过使用nested SVG document解决

// svg.js + svg.draggable.js

// create canvas
var draw = SVG().size(200, 200).addTo('#canvas')

// pattern of checkerboard
var patt = draw.pattern(20, 20)
patt.rect(20, 20).fill({color: '#fff'})
patt.rect(10, 10)
patt.rect(10, 10).move(10, 10)

// nested svg document
var nested = draw.nested()

// rect + pattern
nested.rect(80, 80).attr({
    fill: patt
})

// drag on
nested.draggable()