Q:

How can I dynamically update the patternTransform attribute for an SVG text

I have a simple text filled with a pattern like:
<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>

However I would like to dynamically update the pattern position through javascript.
I have tried to update through:
document.getElementById('img1').setAttribute('patternTransform', 'translate(0,200) scale(1,1)')

But it didn't work.

A:

Your image seems to be a random bitmap which is 690 pixels wide and crucially 200 pixels high. When you change the pattern by calling this:
document.getElementById('img1').setAttribute('patternTransform', 'translate(0,200) scale(1,1)')

You move the pattern down by 200 pixels and patterns wrap around. Since this pattern is 200 pixels high, it wraps around so it looks exactly the same as it did before, like a runner in a race doing exactly one more lap looks like he's in the same position. Try using some other number than 200 and you'll see that the pattern does change.

