如何在HTML中渲染不同大小的SVG？

Question

鑑於這種SVG：

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> 
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> 
<g> 
    <title>Layer 1</title> 
    <ellipse stroke="#000000" ry="210.999999" rx="259.000004" id="svg_1" cy="237.727263" cx="324.999989" stroke-width="5" fill="#FF0000"/> 
</g> 
</svg> 

如何它擴展到用戶320×240，而無需重新計算裏面的數字嗎？這甚至有可能嗎？

Answer 1

添加viewBox="0 0 640 480"並將width="320" height="240"設置爲<svg>元素以縮放SVG。您可以在width和height上發瘋，並使用preserveApsectRatio屬性控制寬高比。

Answer 2

使用viewBox屬性來控制您可以在頁面中看到的內容。交替地將內容包裝在一個<g>元素中，並對其設置0.5的縮放比例。