css - 增加 SVG 的宽度，保持高度不变。拉伸(stretch) 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>

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

我想“拉伸(stretch)”它，这样宽度会增加，但高度不会增加，因为 Canvas 会扩大，从而保持路径的完整性。这可能吗？

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

Answer 1

给 svg 元素一个固定的 height="282.47437" 和 width="100%" 并设置 preserveAspectRatio= “无”。

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>