抓三張使用SVG方，讓他們縱向排列

以下是我的代碼：抓三張使用SVG方，讓他們縱向排列

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="1200px" height="1500px" viewBox="0 0 400 500" id="RoomsSVG"> 
    <svg id="Room1" width="1200px" height="500px" x="0px" y="0px"> 
    <rect id="Room1Rect" width="100%" height="100%" fill="red" stroke="black" stroke-width="5px" /> 
    </svg> 
    <svg id="Room2" width="1200px" height="500px" x="0px" y="500px"> 
    <rect id="Room2Rect" width="100%" height="100%" fill="green" stroke="black" stroke-width="5px" /> 
    </svg> 
    <svg id="Room3" width="1200px" height="500px" x="0px" y="1000px"> 
    <rect id="Room3Rect" width="100%" height="100%" fill="blue" stroke="black" stroke-width="5px" /> 
    </svg> 
</svg>

我想提請三個正方形，它們有不同的colors.And我想給他們一個縱向排列，但顯示器總是錯誤的。紅色填充在所有屏幕上（寬度：1200px，高度：1500px）。我不知道爲什麼？我已經修改了一個多小時，仍然如此。誰能告訴我原因？謝謝！

來源

2012-12-26 Bruce Li

viewBox屬性切出寬度400和高度500（用戶座標）的矩形。這意味着，只有最上面的紅色矩形被看到，所有其他的都位於視圖框外。

這也是爲什麼你看不到的框的右邊距，如紅色框爲1200個單位寬的原因，但該視圖框只能說明什麼是在介於0和400

來源

2012-12-26 07:31:11

你是什麼意思是頁面在寬度1200和高度1500的viewBox中顯示圖片。但是我設置寬度400和高度500的viewBox。它爲什麼變大？ –

SVG的座標空間是抽象的，即它與屏幕像素不對應，即使你說'1500px'。你要做的是在抽象畫布上畫出三個方格，然後從寬度爲400和高度爲500的點'0,0'切出一個矩形，然後將你剪出的部分拉伸以適合指定的寬度和高度。 –

好吧，我知道了，雖然不是很理解。謝謝！ –

抓三張使用SVG方，讓他們縱向排列

回答

相關問題