使用SVG剪切路径创建不规则边框

Question

使用SVG剪切路径创建不规则边框

3

我想要创建的最终效果如下图所示：

我已经将其几乎完全制作出来，但似乎使用于剪辑路径(clip-path)的SVG路径存在问题。在这个CodePen中，当我使用#unusual-border2作为剪辑路径时，它可以正常工作。但是，我需要使用正确的SVG路径#unusual-border1，就像上面的截图一样，但它无法正常工作。

以下是一个可用的<path>元素示例：

<path d="M0,0.25 0.4,0.05 0.55,0.2 0.6,0.15 0.75,0.25 1,0.1 1,1 0,1z" />

我需要使用的路径元素：

<path d="M2049,6c0,188,0,376,0,564c-682.7,0-1365.3,0-2048,0C1,380.7,1,191.3,1,2c43.6,1.1,87.3,1.7,130.9,3.5
        c49.8,2.1,99.5,5.3,149.2,7.8c36.7,1.9,73.5,3.4,110.3,4.9c16.8,0.7,33.6,1.2,50.5,1.3c25,0.1,50,0,75-0.7
        c21.6-0.6,43.2-2.4,64.8-3.6c20.9-1.2,41.9-2.3,62.8-3.4c25.1-1.2,50.2-3.2,75.3-3.4c89-0.4,178-0.1,267-0.2
        c8.3,0,16.7-0.4,25-0.7c37.3-1.7,74.5-4,111.8-5.1c23.8-0.7,47.6,0.2,71.5,0.5c44.7,0.5,89.3,1.2,133.9,1.8c40,0.6,80,1.3,120,1.8
        c54.1,0.7,108.3,2.3,162.4,1.6c80.5-1,160.9-4.4,241.3-5.6c52.6-0.8,105.3,0.3,157.9,0.9C2023.4,3.7,2036.2,5.2,2049,6z"/>

我做错了什么？

- ianpoley

2

当您指定clipPathUnits =“objectBoundingBox”时，坐标应该像比率一样提供（据我所知，它不能超过1），就像示例中那样。 0,0.25表示X轴上的0％和Y轴上容器高度的25％。您的无法工作的路径也应进行修改以像这样进行（或）您应该放弃使用objectBoundingBox。我建议前者，因为这样更容易将相同的剪切路径用于不同大小的多个元素。 - Harry

谢谢，Harry。我相信我理解你的意思，但我有点不知道如何编辑SVG，我需要使用clipPathUnits属性。有关这一点的任何建议吗？ - ianpoley

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

如我先前对问题的评论所述，当指定clipPathUnits = "objectBoundingBox"时，提供的坐标应该像比率一样（因此不能超过1），就像可行的示例中一样。

<path d="M0,0.25 0.4,0.05 0.55,0.2 0.6,0.15 0.75,0.25 1,0.1 1,1 0,1z" />

在上面的路径定义中，(0,0.25) 指的是 X 轴上表示 0%、Y 轴上表示容器高度的 25% 的点。不起作用的路径也应按此方式进行修改，或者避免使用clipPathUnits = objectBoundingBox 这种写法。我建议采用前者，因为这样可以更轻松地将相同的裁剪路径用于不同大小的多个元素。

将现有路径转换为基于比例的值可以完成，但是当存在许多路径命令（您的路径包含很多命令）时，复杂性会变得非常高。您需要做的只是找到 X 和 Y 轴上的最大坐标，然后将所有值都除以该数字以获得比例。在提问中提供的 path 中，最高的 X 坐标为 2049，Y 坐标为 564。因此，点 (0,188) 应转换为 (0/2049, 188/564)，即大约是 (0,0.33)。

以下代码片段显示了原始路径和转换后的路径。我将其作为代码片段放置，以使用展开或折叠功能。此路径的演示可在此处查看。

<!-- Original Path -->
<path d="M2049,6
         c0,188 0,376 0,564
         c-682.7,0 -1365.3,0 -2048,0
         C1,380.7 1,191.3 1,2
         c43.6,1.1 87.3,1.7 130.9,3.5
         c49.8,2.1 99.5,5.3 149.2,7.8
         c36.7,1.9 73.5,3.4 110.3,4.9
         c16.8,0.7 33.6,1.2 50.5,1.3
         c25,0.1 50,0 75,-0.7
         c21.6,-0.6 43.2,-2.4 64.8,-3.6
         c20.9,-1.2 41.9,-2.3 62.8,-3.4
         c25.1,-1.2 50.2,-3.2 75.3,-3.4
         c89,-0.4 178-0.1 267-0.2
         c8.3,0 16.7,-0.4 25,-0.7
         c37.3,-1.7 74.5,-4 111.8,-5.1
         c23.8,-0.7 47.6,0.2 71.5,0.5
         c44.7,0.5 89.3,1.2 133.9,1.8
         c40,0.6 80,1.3 120,1.8
         c54.1,0.7 108.3,2.3 162.4,1.6
         c80.5,-1 160.9,-4.4 241.3,-5.6
         c52.6,-0.8 105.3,0.3 157.9,0.9
         C2023.4,3.7 2036.2,5.2 2049,6z" />

<!-- Converted Path -->
<path d="M1,0.01 
         c0,0.33 0,0.66 0,1 
         c-0.33,0 -0.66,0 -1,0 
         C0,0.675 0,0.339 0,0.003
         c0.021,0.001 0.042,0.003 0.063,0.006
         c0.024,0.003 0.048,0.009 0.072,0.013
         c0.017,0.003 0.035,0.006 0.053,0.008
         c0.008,0.001 0.016,0.002 0.024,0.002
         c0.012,0 0.024,0 0.036,-0.001
         c0.010,-0.001 0.021,-0.004 0.031,-0.006
         c0.010,-0.002 0.020,-0.004 0.030,-0.006
         c0.012,-0.002 0.024,-0.005 0.036,-0.006
         c0.043,0 0.086,0 0.130,0
         c0.004,0 0.008,0 0.012,0.001
         c0.018,-0.003 0.132,-0.007 0.054,-0.009
         c0.011,-0.001 0.023,0 0.034,0
         c0.021,0 0.043,0.002 0.065,0.003
         c0.019,0.001 0.039,0.002 0.058,0.003
         c0.026,0.001 0.052,0.004 0.079,0.002
         c0.039,-0.001 0.078,-0.007 0.117,-0.010
         c0.025,-0.001 0.051,0 0.077,0.001
         C0.987,0.006 0.993,0.009 1,0.010z" />

虽然上面的 clip-path 能够起作用，但我个人不喜欢以下几点：

使用了大量的路径命令。这可能使曲线更加优美，但编辑/维护它们会很麻烦。
混合使用了绝对坐标（C）和相对坐标（c）命令。在我看来，最好避免这种混合使用。我认为这个命令序列可能是由某个工具生成的。

因此，我创建了一个更简单的路径版本，并在下面的片段中提供。这只是一种个人选择，您可以选择任何您喜欢的。

SVG path 命令非常容易理解。在这个片段中，我们使用了以下命令：

M - 将虚拟笔移动到由其旁边提供的坐标表示的点（绝对坐标）。
C - 绘制贝塞尔曲线，其中前两组坐标是曲线的控制点，第三组坐标是曲线的结束点。

您可以在此 MDN 文章中了解有关每个命令及其语法的更多信息。

body{
  background: url(http://lorempixel.com/800/800/people/3);
  padding: 0;
  margin: 0;
}  
.container {
  position: relative;
  height: calc(99.75vh - 50px);
  width: 100%;
  margin-top: 50px;
  -webkit-clip-path: url(#clipper);
}
.lightblue,
.navyblue {
  position: absolute;
  height: 100%;
  padding-top: 20px;
}
.lightblue {
  width: 65%;
  background: lightblue;
}
.navyblue {
  left: 65%;
  width: 35%;
  background: navy;
}

<div class='container'>
  
  <div class='lightblue'>content</div>
  <div class='navyblue'>content</div>
</div>
<svg width="0" height="0">
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,0.01 
               C0.05,0.01 0.2,0.04 0.25,0.04 
               C0.3,0.04 0.35,0.02 0.35,0.025 
               C0.355,0.0225 0.45,0.03 0.5,0.035
               C0.53,0.035 0.58,0.02 0.6,0.02
               C0.63,0.015 0.74,0.0275 0.75,0.03
               C0.78,0.032 0.925,0.0125 0.95,0.015
               C0.97,0.0125 1,0.025 1,0.025 L1,1 0,1z'/>
      </clipPath>
    </defs>
  </svg>