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＆amp;中的最大坐标。 Y轴然后将所有值除以该数字以得到比率。在提供的path中，最高X坐标为2049，Y坐标为564.因此，点（0,188）应转换为（0 / 20,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>

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

1 个答案: