SVG剪辑路径不起作用

TJB 发表于 Dev

TJB

我是一名新手Web开发人员，所以请放轻松。我正在尝试以美国的形状制作自定义形状的元素。在我的html中，我创建了一个带有clipPath子元素的svg元素，以及一个显示该元素必须经过的坐标点的多边形元素子元素，但未显示。以下是我的HTML和CSS。

的HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>

<svg width="100" height="100">
  <clipPath id="clipPolygon">
    <polygon points="129 43,114 250,389 272,390 54,125 42">
    </polygon>
  </clipPath>
</svg>

</body>
</html>

的CSS

/*Chrome,Safari*/
-webkit-clip-path: polygon(129px 43px,114px 250px,389px 272px,390px 54px,125px 42px);

/*Firefox*/
clip-path: url("#clipPolygon");

土豆皮

从文档https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath中，

剪切路径限制了可以施加涂料的区域。

因此，直到您实际尝试绘制某些东西时，您才真正看到此效果，就像这样

<svg width="1000" height="1000">
    <clipPath id="clipPolygon">
        <polygon points="129 43,114 250,389 272,390 54,125 42">
        </polygon>
    </clipPath>
    <rect x="0" y="0" height="1000" width="1000" fill="red" clip-path="url('#clipPolygon')"></rect>
</svg>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。