Клип Путь с SVG

Question

Я создал следующий путь CSS Clip с SVG.Я хотел бы знать, что, как сделать это несколько уникальных форм, а не обычную шестиугольную маску?Также я хотел бы дать радиус границы краям.Любая помощь будет оценена.

Заранее спасибо.

http://ktdev.khaleejtimes.ae/bg/bg-shapenw1.html

.svg_pan {
    width: 90%;
    height: 600px;
    border-radius: 50px;
}



<svg class="svg-graphic svg_pan" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g>
       <clipPath id="hexagonal-mask">
          <polygon points="130,0 0,160 0,485 270,645 560,485 460,160" />
       </clipPath>
    </g> 
    <a xlink:href="#">
     <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="al-seef.jpg" />
    </a>
</svg>

Answer 1

Вам нужно будет рассчитать атрибут d для пути - ваш многоугольник с закругленными углами.В этом случае я использую квадратичные Безье для закругленных углов.Надеюсь, это поможет.

.svg_pan {
  border:1px solid;
}

<svg class="svg-graphic svg_pan" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">

 <defs> 
 <clipPath id="hexagonal-mask-rounded"> 
  <path d="M147.996,8.725 Q130,0 117.388,15.522L12.612,144.478 Q0,160 0.000,180.000L0.000,465.000 Q0,485 17.206,495.196L252.794,634.804 Q270,645 287.512,635.338L542.488,494.662 Q560,485 554.118,465.884L465.882,179.116 Q460,160 442.004,151.275Z" />
   </clipPath>
  
  </defs>
    <a xlink:href="#">
     <image clip-path="url(#hexagonal-mask-rounded)" height="650" width="650" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" />
    </a>
</svg>

Этот инструмент можно использовать для вычисления атрибута d для пути с использованием атрибута points многоугольника: https://enxaneta.github.io/SVG_polygon_with_rounded_corners/