Increase just width of SVG, keep height the same. Stretch SVG

Question

Is it possible to "scale" an SVG using the viewBox property (so all paths remain in tact and relative) but only have it increase the width, or height, without affecting one or the other?

For example, I have a SVG like so (I removed the code about the gradient):

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

but if you resize the window, it scales in both height and width. Can I isolate it to only adjust one of those properties or put a cap like max-height:300px through CSS?

I would want to "stretch" it, so the width would increase, but not the height, as the canvas enlarges, keeping the paths in tact. Is this possible?

DEMO : http://jsfiddle.net/kz7dh59n/

Answer 1

Give the svg element a fixed height="282.47437" and width="100%" and set the 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>