如何重新绘制svg路径以适应其contianer的宽度？

Question

我刚刚开始使用svg＆＃39;我有点挣扎。我有一个svg，我想占用浏览器窗口的50％。

HTML

<svg id="abstract-shape" width="720px" height="803px" viewBox="0 0 720 803" preserveAspectRatio="xMaxYMax meet" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="54.0357258%" y1="64.0162942%" x2="50%" y2="100%" id="linearGradient-1">
                        <stop stop-color="#FFFFFF" offset="0%"></stop>
                        <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
         </linearGradient>
    </defs>
    <g id="abstract-shape-group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                   transform="translate(0.000000, -221.000000)" opacity="0.05">
    <g id="left-column" fill="url(#linearGradient-1)">
                        <path d="M-5.68434189e-14,221.50221 C51.2277861,495.264742 134.633326,688.315239 250.21662,800.653703 C365.799915,912.992168 522.394374,883.015785 720,710.724555 L720,1024 L-5.68434189e-14,1024 L-5.68434189e-14,221.50221 Z"
                              id="shape"></path>
        </g>
    </g>
</svg>

以下是我正在侦听resize事件的方法。当dom准备就绪时，我也正在调用resize方法。

的jQuery

$(function () {
    var $body = $('body'),
        $window = $(window);


function setSvgCoverSize() {
    var windowHeight = $(window).innerHeight(),
        windowWidth = $(window).innerWidth(),
        halfWindowWidth = (Math.floor(windowWidth / 2));

    $('#abstract-shape')
        .removeAttr('viewBox').attr('viewBox', '0 0 ' + halfWindowWidth + ' ' + windowHeight)
        .removeAttr('height').attr('height', windowHeight + 'px')
        .removeAttr('width').attr('width', halfWindowWidth + 'px');
}

setSvgCoverSize();

...

$window.resize(function () {
    setSvgCoverSize();
});


...

Here is a codepen我正在尝试（并且悲惨地失败）。

感谢您的任何建议！

修改

我抱歉没有附加屏幕截图，这是当前功能正在做的事情。正如你所看到的，＆＃34;俯冲＆＃34;事情只是延伸约 50％的方式。

Answer 1

您的问题是由您的svg的preserveAspectRatio和viewBox代价引起的

viewBox的主张是为了确保无论svg的宽度/高度如何，里面的物品仍然在同一个地方。在您的情况下，即使调整浏览器大小，您也不希望更改此值。您只需删除此行：

.removeAttr('viewBox').attr('viewBox', '0 0 ' + halfWindowWidth + ' ' + windowHeight)

然后，您不希望保留宽高比，因为您希望它根据大小进行扩展，因此您可以设置preserveAspectRatio="none"

在这里演示 - ＆gt; https://codepen.io/anon/pen/OQeRVv