Question

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

这是一个最小例子的小提琴，较大的圆圈应该像较小的一样显示模式：

<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

使用视口

1：1无缩放

<svg width="800" height="400" viewBox="0 0 800 400">

2：1缩放双倍尺寸

<svg width="800" height="400" viewBox="0 0 400 200">

以下元素可以使用viewBox属性

<svg>
<symbol>
<image>
<marker>
<pattern>
<view>

viewbox完全可动画;你可以放大任何中心点。

 <animate attributeName="viewBox" begin="1s" dur="1s"
           values="0 0 600 400; 250 180 300 200" fill="freeze" />

转换父标记

是的，SVG可以是子元素，但更常见的是使用多重标记制作的形状放在组标记内。

转换比例可以与作为组标记的父IE的标记一起使用。

<g transform="scale(1.5)">
/* draw your shape inside the g tag */
<use x="100" y="100" xlink:href="#c" />
<use x="200" y="100" xlink:href="#c" />
</g>

因此，使用上面的示例缩放父标记中的形状。

<强>更新

缩放图像而不是图案，换句话说，在缩放的背景图像上移动图案或图标。

<g transform="scale(2)">
/* draw your shape inside the g tag */
<use x="100" y="100" xlink:href="#c" transform="scale(.5)" />
<use x="200" y="100" xlink:href="#c" transform="scale(.5)"/>
</g>

更新完整svg

我不得不移动一些东西，一个全尺寸，（让我们称之为地图），左上角有一个半尺寸地图的叠加。将整个屏幕设置为在0到最大600之间渲染。将视口设置为相同但宽度设置为300会将其缩小。我需要将这个缩放示例的半径加倍。

<svg viewBox="0 0 600 600" 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" />
        <circle fill="url(#checkerPattern)" id="c2" cx="50" cy="50" r="100" />
    </defs>
<use x="100" y="100" xlink:href="#c" transform="scale(.5)"/>
<use x="200" y="100" xlink:href="#c" transform="scale(1)"/>
<rect width="600" height="600" style="fill: none; stroke: black;" />

<svg viewBox="0 0 600 600" width="300" height="300"  x="300">
<use x="100" y="100" xlink:href="#c2" transform="scale(.5)"/>
<use x="200" y="100" xlink:href="#c2" transform="scale(1)"/>
<rect width="600" height="600" style="fill: none; stroke: black;" />
</svg>
</svg>

使用相同的圆形图案缩放此示例。此处不需要更改半径，因为该位置不在缩放的标记中。我在这里使用svg标签，但可以使用其他标签。

<svg viewBox="0 0 600 600" 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" r="50" cx="50" cy="50" />
    </defs>


<svg x="100" y="100"><use xlink:href="#c" transform="scale(.5)"/></svg>
<svg x="200" y="100"><use xlink:href="#c" transform="scale(1)"/></svg>
<rect width="600" height="600" style="fill: none; stroke: black;" />

<svg viewBox="0 0 600 600" width="300" height="300"  x="300">
<svg x="100" y="100"><use xlink:href="#c" transform="scale(1)"/></svg>
<svg x="200" y="100"><use xlink:href="#c" transform="scale(2)"/></svg>
<rect width="600" height="600" style="fill: none; stroke: black;" />
</svg>
</svg>

Answer 2

你无法使用模式得到你想要的东西，变换总是在填充后发生，你不能只是将模式填充移动到包装器中。我的建议是使用过滤器并将过滤器应用于包装器 - 如下所示：

<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>

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

2 个答案: