Html 如何使剪辑路径在Microsoft Edge上工作？

在为Firefox和MicrosoftEdge（ME）制作剪辑头时，我使用了

clipppath

。它在Firefox中工作，只需将

clipPath

元素放在SVG元素中，将

clip path

样式放在HTML元素中。当我打开相同的代码时，它不会显示任何内容

html、正文、标题{
边际：0px；
身高：100%；
字体系列：Arial Unicode MS；
}
按钮：悬停{
过渡：背景色0.5s线性；
}
a:悬停，李：悬停{
不透明度：0.5；
过渡：不透明度0.4s线性
}
#标题{
宽度：自动；
身高：100%；
} 
/**************************横幅-滑块-标题开始************************/
旋转木马
.项目，
.主动{
身高：100%；
}
.旋转木马内部{
身高：100%；
-webkit剪辑路径：多边形（0,0px 100%，100%85%，100%0）；
剪辑路径：多边形（0 0，0px 100%，100%85%，100%0）；
-webkit剪辑路径：url（“剪辑”）；
剪辑路径：url（“剪辑”）；
}
/*背景图像是使用内联CSS在HTML中设置的，而不是在这里*/
.填充{
宽度：100%；
身高：100%；
背景位置：中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
背景尺寸：封面；
-o-背景尺寸：封面；
}
.填写：之前{
位置：绝对位置；
内容：''；
背景图像：-moz线性梯度（-34度，rgb（1189164）0%，rgb（0,63130）100%）；
背景图像：-webkit线性梯度（-34度，rgb（1189164）0%，rgb（0,63130）100%）；
背景图像：-ms线性梯度（-34度，rgb（1189164）0%，rgb（0,63130）100%）；
不透明度：0.741；
宽度：100%；
身高：100%；
}
.转盘指示器{
边缘底部：50px；
z指数：3；
}
.controlles.izq{
最高：50%；
背景图像：无；
}
.controlles.der{
右：0；
左：自动；
背景图像：无；
最高：50%；
}
.控制{
位置：绝对位置；
排名：0；
底部：0；
左：0；
宽度：15%；
文本对齐：居中；
不透明度：0.5；
颜色：白色；
}
.控件：悬停{
不透明度：1；
}
.旋转木马标题{
右：20%；
左：20%；
最高：20%；
文本对齐：左对齐；
}
.carousel caption>h1、.carousel caption>h2、.carousel caption>h3{
字体系列：Arial Unicode MS；
颜色：白色；
边际：0px；
填充：5px0 5px0；
}
.carousel标题>h1{
字体大小：50px；
}
.carousel标题>h2{
字体大小：40px；
}
.carousel标题>h3{
字体大小：30px；
}
#横幅文本>h1{
字体大小：35px；
}
#横幅文本>h1{
字体大小：50px；
}
#横幅文本>h1{
字体大小：30px；
}
.carousel标题>按钮{
边缘顶部：30px；
边框宽度：2倍；
边界半径：20px；
边框颜色：rgb（255、255、255）；
边框样式：实心；
背景：无；
宽度：167px；
高度：44px；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
颜色：白色；
}
.carousel标题>按钮：悬停{
背景色：白色；
颜色：rgb（1189164）；
字体系列：“开放式Sans”，无衬线；
字号：600；
}
/**************************横幅-滑块-标题端部************************/

.旋转木马内部{
身高：100%；
-webkit剪辑路径：多边形（0,0px 100%，100%85%，100%0）；
剪辑路径：多边形（0 0，0px 100%，100%85%，100%0）；
-webkit剪辑路径：url（“剪辑”）；
剪辑路径：url（“剪辑”）；
P
}
工作签证保险
485/457/417/462
工作访问者医疗保险
$（'.carousel'）。carousel({
间隔：5000//改变速度
})

Microsoft仅支持SVG中的CSS

剪辑路径

属性：

#foo{剪辑路径：url（#myClipPath）}
#内容{位置：相对；}
#内容span{位置：绝对；}
#内容span{top:50px；left:50px；}

你好

请查看我的解决方案。 希望它能帮助你。 干杯

我发现自己在面对这个问题时很有用

最后我使用了and

：：在带有边框的元素之后，类似于：

header:：after{
位置：绝对位置；
内容：“；
显示：块；
左：0；
底部：-20px；
宽度：100%；
边框样式：实心；
边框宽度：0 100vw 20px 0；
边框颜色：透明rgba（0,0,0,0.4）透明；
}

您可以调整
边框宽度
和
边框颜色
属性以满足您的需要。
我遇到的问题是，我正在动态创建数量可变的图表，这些图表可以随窗口调整大小。我不能硬编码CSS，但必须为所有内容动态创建单独的CSS条目。奇怪的是，当您将SVG渲染到画布以获得图像时，clippath工作得很好。只有屏幕上的渲染不支持内联引用；(