CSS clip-path 属性与 SVG 路径有问题

Question

我正在尝试在 div 上使用 clip-path css 属性。下面是我最初开始使用的一个工作示例

.contianer {
  height: 300px;
  width: 300px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  height: 150px;
  width: 150px;
  background: white;
  clip-path: url(#clip);
}

<div class="contianer">
  <div class="box"></div>
</div>

<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="clip">
      <path d="M150 0 L75 200 L225 200 Z" />
    </clipPath>
  </defs>    
</svg>

我们现在以这个例子来根据我们的需要自定义路径，并尝试使用 Adob​​e Illustrator 制作路径，结果如下

.contianer {
  height: 300px;
  width: 300px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  height: 150px;
  width: 150px;
  background: white;
  clip-path: url(#clip);
}

<div class="contianer">
  <div class="box">
  </div>
</div>

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 1536">
  <defs>
    <style xmlns="http://www.w3.org/2000/svg">
      .cls-1 {
        fill: #e6e6e6;
      }
    </style>
    <clipPath id="clip">
      <path class="cls-2"  d="M1866.25984,246.41732V257.189l-.37795,18.74409s1.52362,14.06693,1.559,14.17323,2.941,11.76378,2.941,11.76378l4.88976,6.66142,4.21654,2.374,7.61811,1.66536,30.685,1.73622h6.30709l29.55118-.5315,1.03052,18.03543v826.22835l-2.19982,27.07087-61.08661.70866-17.43307,2.69291-10.60443,8.27169-3.71053,8.45272-.31669,50.32929-3.93528.69966-443.19685-.28879-1.6919-44.69979-2.7018-16.37188-6.36191-6.8181-19.29163-2.126-43.79528.56693-20.26772-.4252-1.98425-22.8189-.16708-831.685,4.986-34.72441,10.77165-22.96063,18-16.58268,25.38581-8.60007,25.52966-3.0522Z"/>
    </clipPath>
  </defs>    
</svg>

您可以看到的问题是，第二个示例没有剪切路径。我认为d 属性格式与该问题有关。每当从网络源获取路径时，路径值类似于 M150 0 L75...，而从 illustrator 中则变为 M1866.7,245.9s-1.1....，带有小数点和所有。我不确定相对路径和绝对路径是否是原因。

我希望正确呈现第二个示例。

这是实际的剪辑路径

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 2048 1536"><defs><style>.cls-1{fill:#e6e6e6;}.cls-2{fill:#f2f2f2;stroke:red;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><path class="cls-2" d="M1866.25984,246.41732V257.189l-.37795,18.74409s1.52362,14.06693,1.559,14.17323,2.941,11.76378,2.941,11.76378l4.88976,6.66142,4.21654,2.374,7.61811,1.66536,30.685,1.73622h6.30709l29.55118-.5315,1.03052,18.03543v826.22835l-2.19982,27.07087-61.08661.70866-17.43307,2.69291-10.60443,8.27169-3.71053,8.45272-.31669,50.32929-3.93528.69966-443.19685-.28879-1.6919-44.69979-2.7018-16.37188-6.36191-6.8181-19.29163-2.126-43.79528.56693-20.26772-.4252-1.98425-22.8189-.16708-831.685,4.986-34.72441,10.77165-22.96063,18-16.58268,25.38581-8.60007,25.52966-3.0522Z"/></svg>

Answer 1

您的第二个示例实际上确实剪切了路径，但问题是 svg 路径比盒子甚至容器大得多。您需要将剪切路径转换（缩放）到与 html 元素相同的尺寸。在svg中可以看到viewBox="0 0 2048 1536"

我不知道剪切路径应该是什么样子，但是如果对您的 svg 文件进行以下更改，它可能会开始变得有意义： <clipPath id="clip" transform="scale(0.1 0.1)">

您可能希望使用 viewbox 的值和 css 的尺寸来获得 clipPath 转换的正确因子。