如何在不缩放图案的情况下缩放形状？

Question

我有一个使用图案的svg形状。当我缩放形状时，我希望图案不缩放。

这是一个带有最小示例的小提琴，较大的圆圈应显示较小的图案：

http://jsfiddle.net/cTMrQ/6/

<svg style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
    <defs>
        <pattern id="checkerPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4">
            <image x="0" y="0" xlink:href="http://inwonderland.at/new/lines.png" width="4" height="4" />
        </pattern>
        <circle fill="url(#checkerPattern)" id="c" cx="50" cy="50" r="50" />
    </defs>
    <use x="100" y="100" xlink:href="#c" />
    <use x="200" y="100" xlink:href="#c" transform="scale(2)" />
</svg>

最终，形状将是一条复杂的路径，图案中的图像将是一张纸的扫描图，因此仅画一个更大的圆圈而不是按比例缩放是行不通的。

更新资料

为了澄清我想要什么，这是两个图像：

这是它的外观，无论我尝试什么，当我缩放形状时：http : //inwonderland.at/new/ihave.png

这就是我想要的：http : //inwonderland.at/new/iwant.png

我希望背景图像（位图图像​​）始终具有其自然大小。

Answer 1

您无法使用模式获得所需的内容，转换总是在填充之后发生，并且您也不能只是将模式填充移动到包装器中。我的建议是使用过滤器并将过滤器应用到包装器上 - 像这样：

<svg style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
    <defs>

 <circle fill="url(#checkerPattern)" id="c1" cx="50" cy="50" r="50" />

 <filter id="linepattern" x="0%" y="0%" height="100%" width="100%">
 <feImage xlink:href="http://inwonderland.at/new/lines.png" result="pattern" width="4" height="4"/>
   <feTile/>
   <feComposite operator="in" in2="SourceGraphic"/>
      </filter>
    </defs>

    <use filter="url(#linepattern)" x="100" y="100" xlink:href="#c1" />

    <use filter="url(#linepattern)" x="200" y="100" xlink:href="#c1" transform="scale(2)" />

    <g filter="url(#linepattern)"> 
    <use x="50" y="100" xlink:href="#c1" transform="scale(2)" />
</g> 
</svg>