Question

我用这样的剪辑路径剪切div：

-webkit-clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);

为了确保与Firefox的兼容性，我创建了一个内联SVG图像链接到：

<svg width=" ? " height=" ? ">
  <defs>
  <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
    <polygon points="0 80px, 100% 0, 100% 100%, 0 100%" />
  </clipPath>
  </defs>
</svg>

-webkit-clip-path: url(#clip-shape);
clip-path: url(#clip-shape);

哪个不起作用，因为它似乎要我定义没有％或px的多边形点：

<svg width="0" height="0">
  <defs>
  <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
    <polygon points="0 XXX (I want pixels here), 1 0, 1 1, 0 1" />
  </clipPath>
  </defs>
</svg>

它以这种方式工作，但是我没有关于如何在其中插入基于px的值的想法（在第一个示例中为80px）。

带有％和px值的内联SVG clipPath？

0 个答案: