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

Question

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

这是一个带有最小示例的 fiddle ，较大的圆圈应该像较小的那样显示图案:

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>