Question

我已经使用SVG创建了以下CSS Clip路径。我想知道如何使其具有一些独特的形状，而不是普通的六角形蒙版？我也想给边缘的边界半径。任何帮助将不胜感激。

谢谢。

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>

这是一个工具，您可以使用该工具使用多边形的https://enxaneta.github.io/SVG_polygon_with_rounded_corners/

的points属性来计算路径的d属性

SVG的剪切路径

1 个答案: