CODEWITHSUNDEEP
htmlcsssvg
Alanay
Alanay

Reputation: 41

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?

Upvotes: 4

Views: 2892

Answers (2)

Michi Spebach
Michi Spebach

Reputation: 11

To fix the anisotropic problem (vertical parts appear thicker than horizontal ones) add vector-effect: non-scaling-stroke; to the polyline's style in @robert-longson's solution:

* {
  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;
  vector-effect: non-scaling-stroke;
}
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <polyline points="0,0 5,10 20,20 30,5 50, 20, 100,100">
</svg>

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 124109

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>

Upvotes: 5

Related Questions