css - 使用 SVG 剪辑路径创建不规则边框

Question

最终我要创建的是:

我几乎让它完全正常工作，但我需要用于剪辑路径的 SVG 路径似乎有问题。在这个CodePen , 当我使用 #unusual-border2作为剪辑路径，它有效。但是，我需要使用 #unusual-border1 ，这是上面屏幕截图中描述的正确 SVG 路径，但它不起作用。

样本 <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"/>

我做错了什么？

Answer 1

正如我之前对问题的评论中所解释的，当指定 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)。

以下代码段包含原始路径和转换后的路径。我把它作为一个片段只是为了使用展开或折叠功能。此路径的演示可用 here .

<!-- 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" />

---

虽然上面的剪辑路径有效，但我个人不喜欢的地方很少，它们是:

• 使用了大量的路径命令。它可能会使曲线更加优雅或美观，但编辑/维护它们会很痛苦。
• 混合了绝对 (C) 和相对 (c) 命令。在我看来，最好避免混合。我认为这个可能是由工具生成的。

因此，我创建了相同路径的更简单版本，它在下面的代码片段中可用。这只是个人选择，您可以选择任何您喜欢的。

SVG path 命令非常容易理解。在此代码段中，我们使用以下内容:

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

您可以在 this MDN article 中阅读有关每个命令及其语法的更多信息.

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>