Horizontal Scaling SVG Path

by BaronGrivet

HTML

<div>
  Change Graph Width:
  <button class="change-width" data-width="25%">25%</button>
  <button class="change-width" data-width="50%">50%</button>
  <button class="change-width" data-width="100%">100%</button>  
</div>
<div id="graph-wrapper" class="graph-wrapper">
  <svg class="graph" viewBox="0 0 100 500" preserveAspectRatio="none">
  <path d="
  M 0 0   
  L 20 200
  L 40 100
  L 60 300
  L 80 200
  L 100 400
  "  vector-effect="non-scaling-stroke"/>
  </svg>
  <div class="line y-100"></div>
  <div class="line y-200"></div>
  <div class="line y-300"></div>
  <div class="line y-400"></div>
</div>

CSS

.graph-wrapper {
  position: relative;
  outline: red dotted 1px;
  transform: scaleY(-1);
  width: 100%;
  height: 500px;
}

.graph {
  width: 100%;
  height: 500px;
  stroke: blue;
  stroke-width: 2px;
  fill: none;
}

.line {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: green solid 1px;
}

.y-100 {top: 100px;}
.y-200 {top: 200px;}
.y-300 {top: 300px;}
.y-400 {top: 400px;}

button {
  cursor: pointer;
}

JavaScript

$('.change-width').click(function(){
	$('#graph-wrapper').width($(this).data('width'));
});