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

How to make SVG image pattern fill move with object?

本文关键字：移动 对象 填充 模式 何使 SVG 图像      更新时间：2023-09-26

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

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

如何让背景也移动呢?从我如何移动一个带有元素的SVG模式，我试图设置patternContentUnits='objectBoundingBox'，但这只是将图像变成一个纯色斑点(奇怪的是，虽然，根据图像着色，好像它只是第一个像素或诸如此类)。

上面的rect已经变成了纯色，然后底部的rect有背景图像，但它不会随着rect移动:

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

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

提前感谢您的帮助。

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

如果使用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>元素。

尝试将patternUnits的value设置为"objectBoundingBox"

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

模式位置相对于第一个父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>
相关文章：