htmlcsssvg

How can I have an SVG polyline points in percentages?

I want to be able to create the SVG path where 0,0 would be top left of the screen and 100,100 would be bottom right.

This is what I have so far, it just creates the graph in the centre, not what I had in mind.

* {
  margin: 0;
  padding: 0;
}

html,
body,
svg {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

polyline {
  fill: none;
  stroke: gray;
  stroke-width: 5;
}
<svg viewbox="0 0 100 100">
      <polyline points="0,0 5,10 20,20 30,5 50, 20, 100,100">
    </svg>

Could anybody help with this? Is it even possible?

Solution

  • Presumably you just want to stop preserving the aspect ratio of the viewBox like so...

    * {
  margin: 0;
  padding: 0;
}

html,
body,
svg {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

polyline {
  fill: none;
  stroke: gray;
  stroke-width: 5;
}
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <polyline points="0,0 5,10 20,20 30,5 50, 20, 100,100">
    </svg>