gpt4 book ai didi

html - SVG 剪辑路径不适用于 div

转载 作者:行者123 更新时间:2023-11-28 06:00:03 25 4
gpt4 key购买 nike

我正在尝试使用 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);
}

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

最佳答案

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

结果:

enter image description here

关于html - SVG 剪辑路径不适用于 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36813258/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com