增加 SVG 的宽度，保持高度不变。拉伸 SVG

Question

是否可以 "scale" 使用 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>

但是如果您调整 window 的大小，它的高度和宽度都会缩放。我可以隔离它以仅调整其中一个属性或设置一个上限，例如 max-height:300px 到 CSS?

我想 "stretch" 它，所以宽度会增加，但高度不会增加，因为 canvas 扩大，保持路径完整。这可能吗？

演示：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>

增加 SVG 的宽度，保持高度不变。拉伸 SVG

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

css

svg