为什么我无法在Chrome中翻译模式的Y位置？

Question

这是我的code：

<div id="linkz" style="cursor:pointer;">Move pattern</div>

<div id="container">
    <div id="gray">
        <svg>
            <defs>
                <pattern id="bg" patternUnits="userSpaceOnUse" width="640" height="319" >
                    <image xlink:href="http://cdn2.stbm.it/zingarate/gallery/foto/le-spettacolari-foto-dal-mondo-da-usare-come-immagine-di-copertina-di-facebook/maldive_2.jpeg" width="640" height="319" />
                </pattern>             
            </defs>

            <text class="my-text" id="text-1" x="20px" y="20" fill="url(#bg)" dominant-baseline="hanging">Item 1</text>      
        </svg>
    </div>
</div>

$('#linkz').click(function() {
    $('#bg').attr('y', 30);
}); 

当我点击＆＃34;移动模式＆＃34;它应该翻译20px模式的y坐标。它在Firefox中运行良好，但我无法在Chrome（上一版本）中执行此操作。我哪里错了？