剪辑路径在 Firefox [% 值] 中不起作用

Posted 2023-03-05

【中文标题】剪辑路径在 Firefox [% 值] 中不起作用

【英文标题】：Clip-path doesn't work in firefox [% values]

【发布时间】：2016-02-22 08:34:12

【问题描述】：

我正在尝试在 mozilla 中运行 svg 剪辑路径，但它不起作用。

.mask-1 
    -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
    clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);

它在 chrome 中完美运行。谁能帮助我使用 Mozilla 和其他浏览器？

【问题讨论】：

尝试使用-moz-clip-path

我试过了，还是不行

Firefox 不支持clip-path。 （我记得）。 This 可以帮到你。

其实FF目前只支持url([svgFile.svg]#element)的svg CSS clip-path

@Kaiido，它支持 % 值吗？

【参考方案1】：

除了@atomictom 的回答，我发现如果您将 div 的类更改为 id，那么您就不必内联 CSS

body 
  background: lightgreen;

#clip-this 
  background:red; 
  height: 200px; 
  width: 200px;
  clip-path: polygon(40.4% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: url("#swipe__clip-path");

 <div id="clip-this"></div>
    
    <!-- this lets Firefox display the angle -->
    <svg class="clip-svg">
    	<defs>
    		<clipPath id="swipe__clip-path" clipPathUnits="objectBoundingBox">
    			<polygon points="0.404 0, 1 0, 1 1, 0 1" />
    		</clipPath>
    	</defs>	
    </svg>

【参考方案2】：

您可以在 Firefox 中使用内联 SVG（如下面的代码所示），其中您的分数是百分比 / 100。由于 clipPathUnits 属性，掩码将是响应式的。

<svg  >
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 0.58 0, 0.39 0.818, 0 0.818" />
    </clipPath>
  </defs>
</svg>

参考svg之类的

.mask-1 
   -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
   clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
   -webkit-clip-path: url("#clip-shape"); 
   clip-path: url("#clip-shape");

我为此苦苦挣扎，因为我的 svg 是动态添加到页面中的。通过js延迟（或页面加载）应用clip-path css-property解决了我在FF中的问题。

据我所知，IE 不支持。

【参考方案3】：

我也为此苦苦挣扎。我涵盖了与上述答案类似的基础，但我发现的一个解决方案是使用 Style 标签添加 CSS 内联。这很丑陋，但至少可以工作。

<div class="clip-this" style="background:red; height: 200px; width: 200px;"></div>

<!-- this lets Firefox display the angle -->
<svg class="clip-svg">
	<defs>
		<clipPath id="swipe__clip-path" clipPathUnits="objectBoundingBox">
			<polygon points="0.404 0, 1 0, 1 1, 0 1" />
		</clipPath>
	</defs>	
</svg>

<style>
  .clip-this 
	clip-path: polygon(40.4% 0, 100% 0, 100% 100%, 0 100%);
	clip-path: url("#swipe__clip-path");


</style>

【讨论】：

这是唯一对我有用的东西！我永远不会猜到我需要将规则从 css 中取出并放入 html 正文中。感谢您的提示

这对我有用！但我想给它添加一个 CSS 过渡？