How to scale SVG path to fit the window size?

Question

I am having troubles to scale the SVG to fit the window size.

In this example, I have a wavy path and a text element, what I want to achieve here is to move the text el

Answer 1

Here's what you could do: add a media query defining the desired width and then apply the following styles separately for the text and path elements inside the svg element:

text {
  font-size: 2em;
}  

path {
  -webkit-transform: scale(.3);
  -ms-transform: scale(.3);
  transform: scale(.3);
}

See the snippet below:

document.getElementById("MyPath").setAttribute("d", document.getElementById("Path").getAttribute("d"));
var tl = new TimelineMax({
  repeat: 0,
  delay: 1
});
tl.to("#Text", 3, {
  attr: {
    startOffset: '50%',
    opacity: 1
  }
});


window.addEventListener('scroll', function() {
  tl.to("#Text", 3, {
    attr: {
      startOffset: '100%',
      opacity: 0
    }
  });
}, true);

@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
  background-color: #222;
}

svg {
  overflow: visible;
  width: 100%;
  height: 100%;
  background-color: #fff;
  left: 0;
  top: 0;
  position: absolute;
}

@media only screen and (max-width: 500px) {

  text {
    font-size: 2em;
  }  
  
  path {
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
  
}

I hope it helps!