Создание рамки из фрагмента изображения

Question

В общем хочу чтобы из куска картинки сделать полноценную рамку для изображения, а на странице уже было изображение и при выборе фрагмента по нажатию изображение становилось в рамке по его размеру.

Простыми словами сделать из

Вот это

А дальше подогнать готовую рамку по размеру картинки

Answer 1

Собственно это не сложно - берём ваш отрезок - встраиваем его в svg - делаем mask с двух сторон - и крутим его для получения нужной формы - результат увидите при нажатии на Выполнить код

<svg width="350px" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
   <style>
     .m1{
       transform-origin: center;
       transform: rotate(90deg)translate(0,500px)
     }
     .m2{
       transform-origin: center;
       transform:translate(0,500px)
     }
     .m3{
       transform-origin: center;
       transform: rotate(-90deg)translate(0,500px)
     }  
     .m4{
       transform-origin: center;
       transform: rotate(-180deg)translate(0,500px)
     }   
   </style>
   <mask id="m1">
     <rect width="600px" height="100px" fill="#fff"></rect>
       <path d="M600,0 600,100 500,0z"/>
       <path d="M0,0 0,100 100,0z"/>
   </mask>
  </defs>
  
  <image href="https://i.stack.imgur.com/wrGO7.jpg" width="410px" height="410px" x="95" y="95"/>
  <g>
  <image href="https://i.stack.imgur.com/0E5BJ.png" 
         width="600" height="100" preserveAspectRatio="none"
         class="m1" mask="url(#m1)" />
  
   <image href="https://i.stack.imgur.com/0E5BJ.png" 
         width="600" height="100px" preserveAspectRatio="none"
         class="m2" mask="url(#m1)"/>
  
   <image href="https://i.stack.imgur.com/0E5BJ.png" 
         width="600" height="100px" preserveAspectRatio="none"
         class="m3" mask="url(#m1)"/>
  
     <image href="https://i.stack.imgur.com/0E5BJ.png" 
         width="600" height="100px" preserveAspectRatio="none"
         class="m4" mask="url(#m1)"/> 
</g>
</svg>

Второй вариант - если надо горизонтальное фото

<svg viewBox="0 1 980 755" xmlns="http://www.w3.org/2000/svg" width="350">
  <defs>
   <mask id="m1">
        <rect width="100%" height="100%" fill="#fff" />
        <path d="M0,0 0,100 100,100z"/>
        <path d="M980,0 980,100 880,100z "/>
    </mask>
    
    <mask id="m2">
     <rect width="100%" height="100%" fill="#fff" />
     <path  d="M0,668 100,668 0,768z" />
     <path  d="M880,668 980,668 980,768z" />
    </mask>
    <style>
      .image3{
        transform-origin:top left;
        transform: rotate(90deg)translate(-200px,-100px);
      }
      .image4{
        transform-origin:top left;
        transform: rotate(90deg)translate(-200px,-980px);
      }
    </style>
  </defs>
  
 <image href="https://i.stack.imgur.com/vFkd0.jpg" 
        width="980" height="755" x="0" y="0"/>
 
    <image href="https://i.stack.imgur.com/0E5BJ.png" 
         preserveAspectRatio="none"
         width="100%" height="100px"
         x="0" y="0" class="image3"/>

    <image href="https://i.stack.imgur.com/0E5BJ.png" 
         preserveAspectRatio="none"
         width="100%" height="100px"
         x="0" y="0" class="image4"/> 
  
    <image href="https://i.stack.imgur.com/0E5BJ.png" 
         preserveAspectRatio="none"
         width="100%" height="100px"
         x="0" y="0" mask="url(#m1)"/>
  
  <image href="https://i.stack.imgur.com/0E5BJ.png" 
         preserveAspectRatio="none"
         width="100%" height="100px"
         x="0" y="665" mask="url(#m2)"/>


  


</svg>

БЛОГ НА HUSL

Создание рамки из фрагмента изображения

Ответы (1 шт):