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

Question

我有一些带有平铺图像背景的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属性,背景也得到翻译为好,但现有的代码库,我中工作不使用翻译的定位(和它会对其他地区其他意外后果应用程序).

在此先感谢您的帮助.

Answer 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>元素。