7

我有一些使用 平铺图像背景的 SVG 对象fill="url(#background)，我将其定义#background为pattern仅包含image.

但是，当对象通过设置其x/y属性（或cx/cy或任何其他定义偏移量）重新定位时，背景不会随之移动。

如何使背景也移动？从我将如何使用我尝试设置的元素移动 SVG 模式，patternContentUnits='objectBoundingBox'但这只是将图像变成纯色斑点（奇怪的是，根据图像着色，就好像它只是第一个像素或类似的东西） .

这是一个说明所有这些的 jsfiddle - 顶部rect已变成纯色，然后底部rect有背景图像，但它不会随rect:

http://jsfiddle.net/x8nkz/17/

我知道，如果您使用而不是transform="translate(...)"设置x/y属性，背景也会被翻译，但我正在使用的现有代码库不使用 translate 进行定位（并且它会对其余部分产生其他意想不到的后果应用程序）。

提前感谢您的帮助。

4

4 回答 4

3

我实际上遇到了同样的问题并找到了解决方案。我已经分叉了你的小提琴来展示这些变化。基本上，您删除了 patternContentUnits 属性，因为它在这里没有帮助，并在每次更新后更新图像的 x 属性以匹配 rect 对象的属性。

http://jsfiddle.net/RteBM/2/

更新的 HTML：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<title>basic pattern</title>
<defs>
    <pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse">
         <image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image>
    </pattern>
    <pattern id="pat2" width="179" height="132" patternUnits="userSpaceOnUse">
        <image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image>
    </pattern>
</defs>
<rect id="rect1" x="0" y="0" width="179" height="132" fill="url(#pat1)"/>
<rect id="rect2" x="0" y="150" width="179" height="132" fill="url(#pat2)"/>
</svg>

更新的 JS：

var i = 0;
var newX;
setInterval(
    function(){
        $('rect').attr('x', Math.sin(i+=.01)*100+100);      
        $('#pat1').attr('x', $("#rect1").attr('x'));
    }, 100);
于 2013-10-30T06:11:38.973 回答
1

如果您使用 objectBoundingBox 单位，则宽度为 1（或 100%）是对象的宽度，因此 178 将是该宽度的 178 倍。你可能想要

<pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
    <image width="1" height="1" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image>
</pattern>

但这不会使模式移动。你将需要某种转换来做到这一点。如果你不能把它放在上面，<rect>也许你可以让 rect 成为一个元素的子<g>元素并转换<g>元素。

于 2013-01-18T21:03:24.063 回答
0

尝试将 patternUnits 的值设置为“objectBoundingBox”。

于 2013-01-19T08:03:17.280 回答
0

使用“嵌套 SVG 文档”对可拖动元素进行分组

模式位置相对于第一个父 SVG 文档

在这里摆弄

<html>

<!-- svg.js + svg.draggable.js -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.draggable.js@latest/dist/svg.draggable.min.js"></script>

<div id="canvas"></div>

<script type="text/javascript">

// 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()



/*
// this works too, but its slow:

// group + draggable
var group = draw.group().draggable()

// move handler
group.on('dragmove', (e) => {
  const {x, y} = e.detail.box
  patt.move(x, y)
})

// rect with pattern
var r = group.rect(80, 80).attr({
    fill: patt
})
*/

</script>
</html>
于 2019-11-28T15:47:25.147 回答