SVG文本背景图像问题

Question

所以我设计了相框设计师。你可以找到它here。我希望当单击其中一个模式（在文本设计下的固体颜色块下）时，框架上的文本会更改为其背景为该模式的图像。我知道SVG使用fill属性，你需要将它变成一个模式。它肯定会在一分钟做点什么。我想要this这样的东西，但是我需要它才能在点击时被调用。

这是我的代码。您可以在我的网站上找到完整的代码。

    <defs>                              
        <pattern id="patt1" patternUnits="userSpaceOnUse" width="1246" height="1000">
            <image xlink:href="Images/pattern1.jpg" x="0" y="0" width="1247" height="751" />
        </pattern>
    </defs>

    <text class="text" transform="matrix(2.4428 0 0 1.5 624.6 550.5599)" font-family="'ComicSansMS'" font-size="41.6368">Your words here</text>

和这个

$("#pattern1").click (function() {
    $('.text').css('fill', 'url(#patt1)');
});

由于