Mike_Ro
@Mike_Ro
Зеленая, зеленая трава...

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

Всем привет!

Создал 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);
}


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

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

Спасибо!
  • Вопрос задан
  • 124 просмотра
Решения вопроса 1
@lazalu68
Suspended ))
А зачем вам SVG? Вы вполне можете класть маску просто с помощью clip-path:

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


Кстати, посмотрите на clippy
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
Sveak Барнаул
от 40 000 руб.