缩放SVG剪切路径以供CSS使用

由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 es）。

<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剪切路径，可随元素缩放并适合其尺寸！

直接连结→

翻译自: https://css-tricks.com/scaling-svg-clipping-paths-css-use/