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

概述我的文档中有一个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分量排列在屏幕的左侧,它也是,但我 我的文档中有一个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才能对着屏幕的右侧.我怎么做到这一点？

解决方法 为SVG元素指定一个 viewBox attribute,指定要显示的内容：

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

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

看到行动：

http://jsfiddle.net/jGnST/

有关如何在CSS指定的宽高比与vIEwBox的宽高比不匹配时进一步控制图像裁剪,缩放和对齐的详细信息,请阅读preserveAspectRatio attribute.

总结

以上是内存溢出为你收集整理的HTML中的SVG – 根据页面宽度重新调整路径大小全部内容，希望文章能够帮你解决HTML中的SVG – 根据页面宽度重新调整路径大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。