html - 如何让 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>