Question

我正在尝试使用id="overlay-circle"剪切路径div，但似乎不起作用。这是我的 html代码：

<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);
}

我浏览了很多文章，但无法弄清楚我做错了什么。有任何想法吗？谢谢。

Answer 1

您的问题在于您使用线性渐变的-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%);

<强>结果：

SVG Clip-Path无法处理div

1 个答案: