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" />

我需要将M的x分量排列在屏幕的左侧，它是，但我还需要500 q 300 0 500 -100对抗右侧屏幕。我该如何做到这一点？

Answer 1

为您的SVG元素指定viewBox attribute，指定要显示的内容：

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

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

见过：

http://jsfiddle.net/jGnST/

_{了解有关如何在CSS指定的宽高比与viewBox的宽高比不匹配时进一步控制图像的裁剪，缩放和对齐的详细信息，请阅读preserveAspectRatio attribute。}

Answer 2

确保您的svg根元素的视口大小与封闭的html元素相同。