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

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 以外的其他数字，您会发现模式确实发生了变化。