如何将 svg 点精确定位到一半

Question

无论网站的宽度如何，如何使坐标位于网站的半点，基本上我该怎么做

<path d=" M0 0 L50% 300 L100% 0" stroke="white" fill="yellow"></path>

期待，因为 svg 不允许 % 我如何以 svg 正确的形式写这个，如果有人能回答我的问题，我将非常感激

Answer 1

这个三角形的顶部将始终位于页面的中心。

有用吗？

svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

body:before, body:after {
  content: '';
  position: fixed;
  background: red;
}

body:before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}

body:after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

<svg viewbox="0 0 100 100">
  <path d="M10 90 L50 50 L90 90"></path>
</svg>

Answer 2

将 preserveAspectRatio="none" 设置为 none 的视图框，像这样

<svg id="svg" viewbox="0 0 100 100" width="100%" height="1200px" preserveAspectRatio="none" >
<path d="M0 13 L100 0 L100 100 L0 100 Z " fill="#14305D"></path>
</svg>

如何将 svg 点精确定位到一半

How do I position a svg point exactly half way

css

svg