如何以百分比形式获得SVG折线点数？

Question

我希望能够创建SVG路径，其中0,0位于屏幕的左上方，100,100位于屏幕的右下方。

这是我到目前为止所做的，它只是在中心创建图形，而不是我想到的。

* {
  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>

有人可以帮忙吗？它甚至可能吗？

Answer 1

大概你只想停止保留viewBox的宽高比，就像这样......

* {
  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>