使用 SVG 剪辑路径

Posted 2023-03-23

【中文标题】使用 SVG 剪辑路径

【英文标题】：Clip Path with SVG

【发布时间】：2019-09-25 00:34:00

【问题描述】：

我用 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"   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)"   xlink:href="al-seef.jpg" />
    </a>
</svg>

【问题讨论】：

您不能为此使用多边形。您必须使用路径，因为它涉及的不仅仅是直线。

嗨，Paulie，你能给我看一些例子吗？

不……那是给你研究的。 - tutorials.jenkov.com/svg/path-element.html

您考虑过使用 InkScape 吗？它允许您完全创建和编辑 SVG

【参考方案1】：

您需要计算路径的 d 属性 - 带有圆角的多边形。在这种情况下，我将二次贝塞尔曲线用于圆角。希望对你有帮助。

.svg_pan 
  border:1px solid;

<svg class="svg-graphic svg_pan"   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)"   xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" />
    </a>
</svg>

这是一个您可以使用多边形的点属性计算路径的d 属性的工具：https://enxaneta.github.io/SVG_polygon_with_rounded_corners/