Correct positioning of svg polygon?

Question

css

Hello!
I created a svg polygon triangle, now the question arose, how to correctly drop it in the center of the image?

<img src="https://image.freepik.com/free-photo/shiny-night-city_1127-8.jpg" alt="">
<svg>
 <defs>
  <clipPath id="clipping">
   <polygon points="0 0,300 0,150 300">
   </polygon>
  </clipPath>
 </defs>
</svg>

img
{
    max-width: 100%;
    clip-path: url(#clipping);
}

At the output, we get the following:

Ideally, set the position of the triangle in %, relative to the image, for example, in the center - 50% 50%.
Thank you!

Answer 1

Why do you need SVG? You can put a mask on simply with clip-path :

img {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

By the way, look at clippy