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

我需要将 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/

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

Answer 2

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