HTML中的SVG - 根据页面宽度重新调整路径大小

Question

我的文档中有一个SVG元素,通过css有100%的宽度.这只会重新调整svg元素的大小; 它没有调整路径的大小.这是我的路径代码:

<path id="quadcurveABC" d="M 0 300 q 300 0 500 -100 l 0 100 z" stroke="black" stroke-width="2" fill="black" />

我需要将x分量M排列在屏幕的左侧,它是,但我还需要500 q 300 0 500 -100的屏幕右侧.我怎么做到这一点？

Answer 1

为SVG元素指定一个viewBox属性,指定要显示的内容:

<svg … viewBox="0 200 500 100">

这基本上说,"这个图像的内容是500个单位宽,100个单位高,从0x,200y开始;请务必保持可见"

看到行动:

http://jsfiddle.net/jGnST/

_{阅读关于preserveAspectRatio属性就如何进一步控制剪切,缩放和图像的比对时通过CSS指定的长宽比不匹配视框的纵横比的更多细节.}