Wie kann ich das patternTransform-Attribut für einen SVG-Text dynamisch aktualisieren?

Question

Ich habe einen einfachen Text, der mit einem Muster gefüllt ist:

    Hallo

Ich möchte jedoch die Position des Musters dynamisch über JavaScript aktualisieren. Ich habe versucht, es zu aktualisieren durch:

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

Aber es hat nicht funktioniert.

Answer 1

Dein Bild scheint ein zufälliges Bitmap zu sein, das 690 Pixel breit und entscheidend 200 Pixel hoch ist. Wenn du das Muster änderst, indem du dies aufrufst:

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

Bewegst du das Muster um 200 Pixel nach unten und Muster werden umwickelt. Da dieses Muster 200 Pixel hoch ist, wickelt es sich um, sodass es genauso aussieht wie zuvor, wie ein Läufer in einem Rennen, der genau eine weitere Runde läuft, sieht so aus, als wäre er in derselben Position. Versuche eine andere Zahl als 200 zu verwenden und du wirst sehen, dass sich das Muster ändert.

Answer 2

Versuchen Sie dies

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

oder

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