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 ピクセルなので、前とまったく同じように表示されます。ちょうど 1 周するレースのランナーが同じ位置にいるように見えます。200 以外の数値を使用してみると、パターンが変化することがわかります。

于 2013-08-15T09:02:02.980 に答える