Question

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

HTML

$.get("file_path_here").done(
    function(data){
//do your staff here, data variable contains the json
    }
);

CSS

<!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>

Answer 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>

Answer 2

我在FireFox的几个版本中没有使用剪辑路径时出现问题。我发现将mix-blend-mode属性设为multiply会导致问题。

我的修复是在特别是在那些版本的FireFox上删除那个CSS属性。它是JS和CSS代码的混合体。

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

SVG剪辑路径无法正常工作

HTML

CSS

2 个答案: