2

我有一个简单的文本，其中填充了如下模式：

<svg>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="690" height="200" patternTransform="translate(0,0) scale(1,1)">
            <image xlink:href="http://lorempixel.com/690/200/" width="690" height="200"/>
        </pattern>
    </defs>
    <text id='text1' y='200' fill='url(#img1)'>Hello</text>
</svg>

但是我想通过javascript动态更新模式位置。我试图通过以下方式更新：

document.getElementById('img1').setAttribute('patternTransform', 'translate(0,200) scale(1,1)')

但它没有用。

4

2 回答 2

2

您的图像似乎是一个 690 像素宽和 200 像素高的随机位图。当你通过调用这个来改变模式时：

document.getElementById('img1').setAttribute('patternTransform', 'translate(0,200) scale(1,1)')

您将图案向下移动 200 像素，图案会环绕。由于这个图案有 200 像素高，它会环绕，所以看起来和之前完全一样，就像一个跑者在比赛中只跑了一圈，就好像他在同一个位置。尝试使用 200 以外的其他数字，您会发现模式确实发生了变化。

于 2013-08-15T09:02:02.980 回答
0

尝试这个

$('#img1')[0].setAttribute('patternTransform', 'translate(0,200) scale(1,1)');

或者

$('#img1').first().setAttribute('patternTransform', 'translate(0,200) scale(1,1)');
于 2013-08-14T19:33:02.110 回答