6

我创建了这里看到的 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>

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

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

4

3 回答 3

4

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

于 2012-04-28T08:26:35.050 回答
2

将 patternContentUnits 更改为“objectBoundingBox”（与 userSpaceOnUse 相比）。

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

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

于 2012-04-28T01:06:37.900 回答
-1

如何使 SVG 图像图案填充随对象移动？

通过使用嵌套的 SVG 文档解决

// 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()
于 2019-11-28T15:52:44.227 回答