如何从SVG输出某个位置并对其进行缩放?
例如,我有以下带有SVG的HTML(代码的副本及其呈现位于http://jsfiddle.net/5e0pas9m/)。

<div style="border: 1px solid black;">1
<svg width="100" height="100" viewBox="0 0 200 200" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none">
  <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" />
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" />
</svg>
</div>

<div style="border: 1px solid black;">2
<svg width="100" height="100" viewBox="0 0 100 100" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none">
  <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" />
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" />
</svg>
</div>

<div style="border: 1px solid black;">3
<svg width="100" height="100" viewBox="100 100 200 200" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none">
  <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" />
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" />
</svg>
</div>

<div style="border: 1px solid black;">4
<svg width="100" height="100" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none">
  <g transform="scale(1), translate(-100 -100)">
  <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" />
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" />
  </g>
</svg>
</div>

div-1显示了我的完整图像。
如果我喜欢只显示左上角在同一个窗口,我使VIEWBOX =“0 0 100 100”(DIV-2),它给出了我想要什么:图像的一部分安装到窗口。
但是,当我对右下角(div-3表示viewBox=“100 100 200 200”)执行相同操作时,图像只会被转换,但不会被调整/缩放/缩放。
div-4 nealry展示了一个通过另一种技术实现目标的例子。

最佳答案

viewBox的第三个和第四个参数是width和height,而不是maxX和maxY。所以右下角示例的viewBox应该是“100100100”。

07-24 09:48
查看更多