如何在HTML中以不同的大小呈现SVG?

时间:2013-02-13 10:41:40

标签: svg

鉴于此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>

如何将其缩放到用户320x240,而无需重新计算内部的数字?这甚至可能吗?

2 个答案:

答案 0 :(得分:3)

添加viewBox="0 0 640 480"并将width="320" height="240"设置为<svg>元素以扩展SVG。您可以对widthheight发疯,并使用preserveApsectRatio属性控制宽高比。

答案 1 :(得分:2)

使用viewBox属性控制您在页面中可以看到的内容。或者将内容包装在<g>元素中,并在其上设置0.5的缩放变换。