How can I use SVG polyline points in percentages?
I want to be able to create an SVG path where 0,0 will be the top left corner of the screen and 100 100 will be the bottom right.
This is what I have so far, it just creates a graph in the center, 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>
Can anyone help with this? Is it possible?
+3
source to share
1 answer
Presumably you just want to stop keeping the aspect ratio of the viewBox like this ...
* {
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>
+2
source to share