增加SVG的宽度,保持高度相同.拉伸SVG

Question

是否可以使用viewBox属性"缩放"SVG (因此所有路径保持完整和相对)但只增加宽度或高度,而不影响其中一个？

例如,我有一个这样的SVG(我删除了关于渐变的代码):

<svg viewBox="0 0 300 282.47437" class="panel-2">
    <g transform="translate(-200,-356.72993)" id="layer2">
       <path d="m 200,639.2043 300,0 0,-280.56692 c 0,0 -54.42824,-13.38012 -149.6732,30.73468 C 273.74938,424.84057 200,398.89784 200,398.89784 z" 
        id="path3067"   
        style="fill:url(#radialGradient3909);fill-opacity:1;stroke:none" />
     </g>
</svg>

但如果你调整窗口的大小,它会在高度和宽度上进行缩放.我可以将它隔离到仅调整其中一个属性或max-height:300px通过CSS 设置上限吗？

我想要"伸展"它,所以宽度会增加,但不会增加高度,因为画布会放大,保持路径不变.这可能吗？

演示:http://jsfiddle.net/kz7dh59n/

Answer 1

给svg元素的固定height="282.47437"和width="100%"和设置preserveAspectRatio="none".

Updated Fiddle

<svg viewBox="0 0 300 282.47437" class="panel-2" height="282.47437" width="100%" preserveAspectRatio="none">
  <defs id="defs3053">
    <linearGradient id="linearGradient3897">
      <stop id="stop3899" style="stop-color:#282828;stop-opacity:1" offset="0" />
      <stop id="stop3901" style="stop-color:#161616;stop-opacity:1" offset="1" />
    </linearGradient>
    <radialGradient cx="214.41734" cy="475.73941" r="150.5" fx="214.41734" fy="475.73941" id="radialGradient3909" xlink:href="#linearGradient3897" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.2897714,1.1015688,-1.5801648,0.73906298,951.79987,-143.74246)"
    />
  </defs>
  <g transform="translate(-200,-356.72993)" id="layer2">
    <path d="m 200,639.2043 300,0 0,-280.56692 c 0,0 -54.42824,-13.38012 -149.6732,30.73468 C 273.74938,424.84057 200,398.89784 200,398.89784 z" id="path3067" style="fill:url(#radialGradient3909);fill-opacity:1;stroke:none" />
  </g>
</svg>