Question

我有一个简单的文字，其中包含如下图案：

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

但它不起作用。

Answer 1

您的image似乎是一个随机位图，宽度为690像素，最重要的是200像素。通过调用此方法更改模式时：

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

将图案向下移动200像素，图案环绕。因为这个模式是200像素高，所以它包裹起来所以它看起来和以前完全一样，就像一个跑步者在一场比赛中再做一圈，看起来他处于相同的位置。尝试使用200以上的其他数字，你会发现模式确实发生了变化。

Answer 2

试试这个

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

或

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

如何动态更新SVG文本的patternTransform属性

2 个答案: