SVG 剪辑路径不起作用答案

【问题标题】：SVG Clip Path not workingSVG 剪辑路径不起作用
【发布时间】：2016-03-22 13:47:37
【问题描述】：

我是一名新手 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");

【问题讨论】：

另外，这只是梯形的测试，实际上并不是美国的形状。
所以...你已经在两个地方定义了一个剪辑路径 - 你的 SVG 和你的 CSS。但你没有在任何地方画任何东西！

标签： css html svg

【解决方案1】：

来自文档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>

【讨论】：

【解决方案2】：

我遇到了在几个版本的 FireFox 中无法使用剪辑路径的问题。我发现将 css mix-blend-mode 属性设置为 multiply 会导致问题。

我的解决方法是在那些版本的 FireFox 上删除该 CSS 属性。它是 JS 和 CSS 代码的混合体。

如果您使用的是 Modernizr - 这可能是确定浏览器版本并基于此使用 css 的另一种简单方法。

【讨论】：