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 分量与屏幕左侧对齐，但我还需要 q 300 0 500 -100 的 500 与屏幕右侧对齐。我将如何做到这一点？

Answer 1

给你的 SVG 元素一个 viewBox attribute 指定要显示的内容：

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

基本上就是说，“这张图片的内容是 500 单位宽和 100 单位高，从 0x,200y 开始；请务必保持可见”

实际操作：

http://jsfiddle.net/jGnST/

_{阅读preserveAspectRatio attribute，了解当 CSS 指定的纵横比与 viewBox 的纵横比不匹配时，如何进一步控制图像的裁剪、缩放和对齐。}

Answer 2

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