Правильное позиционирование svg polygon?

Question

[Михаил Р.]

Всем привет!

Создал svg polygon треугольник, теперь встал вопрос, как правильно его выронить по центру изображения?

<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);
}

На выходе получаем следующее:


В идеале, задавать в % положение треугольника, относительно изображения, например по центру - 50% 50%.

Спасибо!

Comments

[Сергей Герасимов]

Так работает?
points="0 0,100% 0,50% 100%"

[Михаил Р.]

Сергей Герасимов, нет, вроде polygon points вообще не поддерживает ничего, кроме px

[Сергей Герасимов]

Mike Ro, значит надо копать в сторону viewport и viewBox
Например, viewBox=”0 0 300 150″

Answer 1

[Kovalsky]

А зачем вам SVG? Вы вполне можете класть маску просто с помощью clip-path:

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

Кстати, посмотрите на clippy

Comments

[Михаил Р.]

Красота, то что нужно! Спасибо!