用于 CSS 的 SVG 剪辑路径缩放

Eric Meyer 记录的一个真正的 CSS 技巧！

CSS 中有 polygon()，SVG 中有 <polygon>。它们密切相关，但存在 各种奇怪之处。例如，您可以使用 CSS 中的 path() 更新 <path> 的 d 属性，但您无法对 polygon() 和 <polygon> 执行相同的操作。

问题的一部分在于 CSS 中的 polygon() 仅接受带单位的数字，例如 px、%、em 或其他任何单位。

.clip-me {
  /* Works! */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  /* Does NOT work */
  clip-path: polygon(50 0, 100 25, 100 75, 50 100, 0 75, 0 25);
}

这与 SVG 完全相反。

<svg>
  /* Works! */
  <polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25"></polygon>

  /* Does NOT work */
  <polygon points="50px 0px, 100px 25px, 100px 75px, 50px 100px, 0px 75px, 0px 25px"></polygon>
  <polygon points="50% 0%, 100% 25%, 100% 75%, 50% 100%, 0px 75%, 0% 25%"></polygon>
</svg>

技巧在于，您可以通过一些简单的数学运算、transform 属性和特殊的 clipPathUnits 属性，强制 SVG 坐标 *表现得像* 百分比坐标（即使使用奇怪的 viewBox）。

<svg viewBox="0 0 329.6667 86">
  <clipPath id="cloud02" clipPathUnits="objectBoundingBox"
   transform="scale(0.003033 0.0116279)">
    <path d="…(coordinates go here)…"/>
  </clipPath>
</svg>

这两个值分别是 1/329.6667 和 1/86，它们有效地将 d 属性中的每个点缩放以适应所需的 0-1 范围。因此，我们得到了一个随元素缩放并适应其尺寸的 SVG 剪辑路径！

直接链接 →