How do I position a svg point exactly half way-CodePudding

How do I make a coordinate be in the half point of my website no matter the width of the website, basically how do I do this

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

expect since svg doesn't allow % how do I write this in svg proper form, if anyone can answer my question I will be very thankful

CodePudding user response：

The top of this triangle will always be at the center of the page.

Is that helpful?

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>

CodePudding user response：

you can use position: absolute to achieve this.

svg {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}