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

前端之家收集整理的这篇文章主要介绍了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分量排列在屏幕的左侧,它也是,但我还需要500的q 300 0 500 -100才能对着屏幕的右侧.我怎么做到这一点?@H_301_5@

解决方法

为SVG元素指定一个 viewBox attribute,指定要显示内容
<svg … viewBox="0 200 500 100">

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

看到行动:@H_301_5@

http://jsfiddle.net/jGnST/@H_301_5@

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

猜你在找的HTML相关文章