html - 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 的 500 300 0 500 -100 靠在屏幕的右侧。我将如何做到这一点？

Answer 1

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

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

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

实际可见:

http://jsfiddle.net/jGnST/

_{阅读有关 preserveAspectRatio attribute 的信息有关当 CSS 指定的纵横比与 viewBox 的纵横比不匹配时如何进一步控制图像的裁剪、缩放和对齐的更多详细信息。}