如何使SVG图像模式填充与对象一起移动？ [英] How to make SVG image pattern fill move with object?

问题描述

我有一些带有平铺图像背景的SVG对象，使用 fill =url（#background），其中我正在定义 #background 作为模式只包含图像。

I have some SVG objects with a tiled image background using fill="url(#background), where I'm defining #background as a pattern containing just an image.

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

However, when the object is relocated by settings its x/y attributes (or cx/cy, or whatever else defines the offset), the background does not move with it.

如何让背景移动？来自我如何使用元素移动SVG模式我试图设置 patternContentUnits ='objectBoundingBox'但这只是转动图像变成一个纯色斑点（奇怪的是，根据图像着色，好像它只是第一个像素或一些像素）。

How do I make the background move as well? From How would I move an SVG pattern with an element I tried to set the patternContentUnits='objectBoundingBox' but that just turns the image into a solid color blob (oddly, though, colored according to the image, as if it were just the first pixel or some such).

这是一个说明所有的jsfiddle这个 - 顶部的 rect 已经变成了一个纯色，然后底部 rect 有背景图片，但它不随 rect 移动：

Here is a jsfiddle illustrating all of this - the top rect has been turned into a solid color, and then bottom rect has the background image but it doesn't move with the rect:

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

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

I know that if you were using transform="translate(...)" instead of setting the x/y attributes, the background does get translated as well, but the existing codebase I'm working within doesn't use translate for positioning (and it would have other unintended consequences on the rest of the application).

提前感谢任何帮助。

推荐答案

我实际上遇到了同样的问题并找到了解决方案。我把你的小提琴分开来表明变化。基本上，你删除了patternContentUnits属性，因为它在这里没有用，并且在每次更新后更新图像的x属性以匹配rect对象的属性。

I actually encountered the same problem and found a solution. I've forked your fiddle to show the changes. Basically, you remove the patternContentUnits attribute as it doesn't help here and update the x attribute of the image to match that of the rect object after each update.

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

这篇关于如何使SVG图像模式填充与对象一起移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！