滑块中的剪辑路径在 Firefox 上不起作用
clip-path in a slider does not work on Firefox
我要切图。并为此使用了剪辑路径。这适用于 Safari 和 Chrome 但不适用于 Firefox。我搜索了该网站中的所有问题,这是我代码的最后一种形式。但仍然无法在 Firefox 上运行。
这是我的图片:
<img src="images/ex-board.jpg" alt="First slide image" class="sliderimg">
这是我的 CSS:
.sliderimg {
width: 100%;
height: 357px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
/*Firefox*/
clip-path: url("#slider-poly");
}
最后将其添加到我的索引文件中:
<svg width="0" height="0">
<defs>
<clipPath id="slider-poly" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 1 0, 1 0.85, 0 1" />
</clipPath >
</defs>
</svg>
但这仍然适用于 Safari 和 Chrome,但不适用于 Firefox。
Spec says 必须是 <clipPath>
元素。您的标记包含 <imagePath>
,据我所知这甚至不是有效的 SVG。这意味着 safari 和 chrome 不符合规范。
我认为您有三种 Firefox 支持选项(我已经测试了所有三种):
使用绝对路径。
引用外部 svg 文件。使用正确的 svg 文档格式:https://www.w3.org/TR/SVG/struct.html
例如:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<defs>
<clipPath id="slider-poly">
<polygon points="100,0 300,0 200,200"/>
</clipPath>
</defs>
</svg>
在您的样式表中:
clip-path: url(filename.svg#slider-poly);
- 使用内部样式表。
我要切图。并为此使用了剪辑路径。这适用于 Safari 和 Chrome 但不适用于 Firefox。我搜索了该网站中的所有问题,这是我代码的最后一种形式。但仍然无法在 Firefox 上运行。
这是我的图片:
<img src="images/ex-board.jpg" alt="First slide image" class="sliderimg">
这是我的 CSS:
.sliderimg {
width: 100%;
height: 357px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
/*Firefox*/
clip-path: url("#slider-poly");
}
最后将其添加到我的索引文件中:
<svg width="0" height="0">
<defs>
<clipPath id="slider-poly" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 1 0, 1 0.85, 0 1" />
</clipPath >
</defs>
</svg>
但这仍然适用于 Safari 和 Chrome,但不适用于 Firefox。
Spec says 必须是 <clipPath>
元素。您的标记包含 <imagePath>
,据我所知这甚至不是有效的 SVG。这意味着 safari 和 chrome 不符合规范。
我认为您有三种 Firefox 支持选项(我已经测试了所有三种):
使用绝对路径。
引用外部 svg 文件。使用正确的 svg 文档格式:https://www.w3.org/TR/SVG/struct.html
例如:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<defs>
<clipPath id="slider-poly">
<polygon points="100,0 300,0 200,200"/>
</clipPath>
</defs>
</svg>
在您的样式表中:
clip-path: url(filename.svg#slider-poly);
- 使用内部样式表。