如何获得 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>

Answer 2

要解决各向异性问题（垂直部分看起来比水平部分更厚），请在 @robert-longson 的解决方案中的折线样式中添加“矢量效果：非缩放描边;”：

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