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

237

15 февраля 2018, 13:39

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

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

<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>

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

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

Answer 1

Как вариант сделать через фон и уже настраивать под себя background-position и background-size

.img { 
  max-width: 100%; 
  clip-path: url(#clipping); 
  min-height:417px; 
  background-image: url(https://image.freepik.com/free-photo/shiny-night-city_1127-8.jpg); 
  background-size:80%; 
  background-repeat: no-repeat; 
}

<div class="img"> 
   
</div> 
<svg> 
     <defs> 
      <clipPath id="clipping"> 
       <polygon points="0 0,300 0,150 300"> 
       </polygon> 
      </clipPath> 
     </defs> 
    </svg>