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