Question

我有一些使用fill="url(#background)的平铺图像背景的SVG对象，我将#background定义为只包含pattern的{{1}}。

但是，当通过设置重新定位对象时，image / x属性（或y / cx或其他任何定义偏移的属性），背景确实如此不随它移动。

如何让背景移动？从How would I move an SVG pattern with an element开始，我尝试设置cy，但只是将图像转换为纯色斑点（奇怪的是，根据图像着色，就好像它只是第一个像素或某些像素一样）

这是一个说明所有这一切的jsfiddle - 顶部patternContentUnits='objectBoundingBox'已变为纯色，然后底部rect具有背景图像，但它不随{{1}移动}}：

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

提前感谢您的帮助。

Answer 1

我实际遇到了同样的问题并找到了解决方案。我把你的小提琴分开来表明变化。基本上，您删除了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);

Answer 2

如果使用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>上，则可以将矩形设为<g>元素的子项并改为转换<g>元素。

Answer 3

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

Answer 4

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

图案位置相对于第一个父级SVG文档

fiddle here

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

如何使SVG图像模式填充与对象一起移动？

4 个答案: