SVG viewBox缩放和裁剪

Question

如何从SVG输出某个地方并放大它？

E.克，我有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代表视框=“100 100 200 200”）的图像仅翻译但没有安装/缩放/缩放。

在div-4 nealry示出了经由另一种技术实现我的目标的一个例子。

Answer 1

viewBox的第三个和第四个参数是宽度和高度，而不是maxX和maxY。因此，右下角示例的viewBox应该是“100 100 100 100”。