如何更改svg模式填充的显示方式

Question

所以我有一个网页here。在＆＃34;框架背景＆＃34;有模式。单击时，它们将显示在相框中。问题是他们中的一些看起来真的很块。特别是最后一个。

我的代码。 jquery的：

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

SVG：

    <defs>                              
        <pattern id="patt1" patternUnits="userSpaceOnUse" width="400" height="500">
            <image xlink:href="Images/pattern1.jpg" x="0" y="0" width="542" height="774" />
        </pattern>
    </defs>

我希望这是有道理的。如果由于某种原因进行投票，请给我反馈原因。