CODEWITHSUNDEEP
jquerysvg
Damon
Damon

Reputation: 4524

How can I redraw an svg path to fit the width of its contianer?

I am just beginning to work with svg' and am struggling a bit. I have an svg that I want to take up 50% of the browser window.

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>

Here is how I am listening for the resize event. I am also firing the resize method right when the dom is ready.

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 of what I am trying (and failing miserably) at.

Thank you for any suggestions!

EDIT

My apologies for not attaching a screen shot, here is what the current functionality is doing. As you can see, the "swoop" thing is only stretching about 50% of the way. enter image description here

Upvotes: 0

Views: 201

Answers (1)

Liora Haydont
Liora Haydont

Reputation: 1283

Your issue is cause by the preserveAspectRatio and the viewBox propreties of your svg

The viewBox proprety is here to make sure that no matter the width/height of the svg, the items inside are still at the same place. In your case, you don't want to change this value even when the browser is resized. You can simply remove this line :

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

And then, you don't want to preserve the aspect ratio, since you want it to expand according to the size, so you can set preserveAspectRatio="none"

Demo here -> https://codepen.io/anon/pen/OQeRVv

Upvotes: 1

Related Questions