CSS - 剪辑路径 svg 在 Firefox 上不起作用
Posted
技术标签:
【中文标题】CSS - 剪辑路径 svg 在 Firefox 上不起作用【英文标题】：CSS - Clip path svg not working on firefox 【发布时间】：2016-09-16 13:18:42 【问题描述】：我正在尝试使用剪辑路径，但这不适用于 Firefox。 我已经搜索过这个，我在堆栈溢出中找到了这个代码。 我实现了几种形状，但这仅适用于 chrome 和 safari。
.shape
width: 300px;
height: 300px;
display: inline-block;
position: relative;
box-sizing: border-box;
-webkit-clip-path: url(#clipper);
-moz-clip-path: url(#clipper);
clip-path: url(#clipper);
background-color: $page-title-background-green;
img
position: absolute;
top: 2px;
left: 2px;
width: 296px;
height: 296px;
-webkit-clip-path: url(#clipper);
-moz-clip-path: url(#clipper);
clip-path: url(#clipper);
<svg >
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<polygon points=".15 0, .7 0, 1 .5, .7 1, .15 1, 0 .7, .2 .5, 0 .3"/>
</clipPath>
</defs>
</svg>
<div class="shape">
<img src="http://lorempixel.com/g/600/400/">
</div>我该如何解决？
谢谢
【问题讨论】：
您的 CSS 是嵌入在您的网页中还是单独的 CSS 文件。如果它是一个单独的文件，那么 #clipper 实际上是我有这个代码：
<body>
<svg class="svg-defs">
<defs>
<clipPath id="clipping">
<polygon points="98.4999978 153.75 38.2520165 185.424245 49.7583542 118.337123 1.01670635 70.8257603 68.3760155 61.037872 98.5000012 1.1379786e-14 128.624005 61.0378871 195.98331 70.8258091 147.241642 118.337136 158.747982 185.424247"></polygon>
</clipPath>
</defs>
</svg>
<svg >
<style type="text/css" media="screen">
image
clip-path: url(#clipping);
</style>
<image xlink:href="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" />
</svg>
</body>所以，试着在你的 SVG 元素中设置 style，或者给 image 一个 style 属性，像这样：
<image style="clip-path: url(#clipping);" xlink:href="...">
【讨论】：
以上是关于CSS - 剪辑路径 svg 在 Firefox 上不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在 Firefox 60 或更早版本中为 SVG 剪辑路径设置动画时出现随机方块
更新SVG元素的转换时，Firefox会移动剪辑路径，而Chromium则不会 - 这是正确的，什么是便携式解决方案？