我创建了这里看到的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>
然后在我的脚本中我创建了一个使用该模式的椭圆。问题是,当我移动椭圆时,图案会保持在它后面而不是用椭圆移动。
如何配置模式以保持元素?
答案 0 :(得分:5)
你需要使用patternContentUnits =“objectBoundingBox”点击这个例子中的矩形来看:http://jsfiddle.net/longsonr/x8nkz/
答案 1 :(得分:3)
我相信您需要将patternUnits更改为“objectBoundingBox”与userSpaceOnUse。这应该为你解决问题。
更新
这个答案不正确 - patternUnits应该对模式的布局方式没有影响,只影响其维度(用户空间单位与边界框单位)。 patternContentUnits是您要设置为“objectBoundingBox”的属性 - 请注意,如果更改边界框的大小,它将缩放您的模式。如果您不希望这种情况发生,那么您需要在模式上使用viewbox属性 - 这可能是获得您可能正在寻找的结果的正确方法(固定大小模式,相对于其边界框定位)
(另请注意,设置溢出到可见会导致“未定义”渲染,根据规范也称 - 不是您想要做的事情)
答案 2 :(得分:0)
与How to make SVG image pattern fill move with object?重复
解决// 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()