SVG剪辑路径不能在div上工作

我想剪辑一个带有id="overlay-circle"的div路径，但它似乎不起作用。这里是我的的html代码：SVG剪辑路径不能在div上工作

<html> 
    <body> 
     <svg> 
      <clipPath id="clipPolygon" clipPathUnits="objectBoundingBox"> 
       <polygon id="clipPoints" points="0.5, 2 3, 3 0.5" /> 
      </clipPath> 
     </svg> 
     <div id="letterWrapper"> 
      <div id="halo"></div> 
      <div id="overlay-circle"></div> 
      <div id="letter"> 
       <div id="letter-spotlight"></div> 
      </div> 
     </div> 
    </body> 
</html>

这是我的CSS：

#overlay-circle 
{ 
    position: absolute; 
    top: 35%; 
    left: 39%; 
    border-radius: 50%; 
    height: 95px; 
    width: 95px; 
    background: -moz-linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%); 
    z-index: 2; 
    clip-path: url(#clipPolygon); 
}

我经历了很多文章去，但无法弄清楚它是什么，我做错了。有任何想法吗？谢谢。

来源

2016-04-23 Nikolay

如果你的CSS是一个单独的文件，那么有没有clipPolygon在你的CSS文件。 #x简称 #x是你的问题吗？ –

好吧我在HTML文件中移动了以内的代码，但都是一样的。问题是我在Opera中没有问题，但Firefox不想显示我的SVG。 – Nikolay

你的多边形是无效的，点的数量是无效的（奇数），它必须是偶数，因为它由坐标对组成。 –

你的问题是你用于线性渐变的-moz-前缀。如果您在Chrome中进行过测试，则会看到空白屏幕。你需要扩大你的梯度属性的支持：

background: -moz-linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%); 
background: -webkit-linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%); 
background: linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%);

结果：

来源

2016-04-23 17:58:11

我不明白这是如何与剪辑路径开始。我现在也只在一个浏览器中进行测试，所以我不需要支持所有的浏览器。 – Nikolay

SVG剪辑路径不能在div上工作

回答

相关问题