由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/