如何在 FF 和 IOS 中使用剪辑路径多边形

Posted 2023-03-06

技术标签:

【中文标题】如何在 FF 和 IOS 中使用剪辑路径多边形【英文标题】：How to use clip-path polygons in FF and IOS 【发布时间】：2015-05-02 19:28:03 【问题描述】：

我尝试编写一个小插件，以更有机的方式打开模式框，因此我决定为 clip-path 属性设置动画。

现在这段代码只适用于 chrome： http://codepen.io/meodai/pen/GgGzYo?editors=011

在 clip-path 属性中看起来像 firefox does not support polygon()。 Safari 和移动版 Safari 也遇到了困难。

是否有类似的简单方法可以在 Firefox 和 Safari 以及 Mobile Safari 中进行这项工作？知道如何解决这个问题吗？

这是一个工作示例：

var $ov = $('.overlay');

$(document).on('click touchstart', '.inner', function()
  var coords, coordArray, coordsString;

  coords = this.getBoundingClientRect();

  coordArray = [
    Math.floor(parseInt(coords.left)) + 'px ' + Math.floor(parseInt(coords.top)) + 'px',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil(parseInt(coords.top)) + 'px',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil((parseInt(coords.top) + parseInt(coords.height) )) + 'px',
    Math.ceil(parseInt(coords.left)) + 'px ' + Math.floor((parseInt(coords.top) + parseInt(coords.height) )) + 'px'
  ];


  coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';

  $ov.css(
    '-webkit-clip-path': coordsString,
    'clip-path': coordsString
  );

  setTimeout(function()
    $ov.addClass('show');
  ,50);

  setTimeout(function()
    coordsString = 'polygon(0% 0%,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    );
  ,100);
  setTimeout(function()
    coordsString = 'polygon(0% 0%,100% 0%,' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    );
  ,180);
  setTimeout(function()
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    );
  ,260);

  setTimeout(function()
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,0 100%)';
    $ov.css(
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    );
  ,340);

  // reverse
  setTimeout(function()
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    );
  ,1500);

  setTimeout(function()
    coordsString = 'polygon(0% 0%,100% 0%,' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    );
  ,1580);
  setTimeout(function()
    coordsString = 'polygon(0% 0%,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    );
  ,1640);
  setTimeout(function()
    coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    );
  ,1740);



   setTimeout(function()
    $ov.removeClass('show');
  ,2000);

);

body, html 
  background: silver;


.grid 
  float: left;
  width: 25%;
  height: 25vw;
  box-shizing: border-box;
  position: relative;


.inner 
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: #ddd;
  -webkit-transition: background-color 111ms;
          transition: background-color 111ms;

.inner:hover 
  background: #fff;


.overlay 
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  pointer-events: none;
  box-sizing: border-box;
  padding: 20px;


.overlay.show 
  opacity: 1;
  will-change: clip-path;
  -webkit-transition: clip-path 200ms;
          transition: clip-path 200ms;
  -webkit-transition: -webkit-clip-path 200ms;
          transition: -webkit-clip-path 200ms;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="overlay"></div>

【问题讨论】：

你可以为 Firefox 使用 SVG - caniuse.com/#search=clip-path @Paulie_D 哦！我不知道您可以将 SVG 引用为剪辑路径，我会尝试一下，谢谢... 仍然想知道是否有跨浏览器解决方案/破解方法这是一篇不错的小文章https://css-tricks.com/clipping-masking-css/ 和这篇Support Chart 请在您的问题中发布您的代码。更有理由在您的问题中发布相关代码。如果 codepen 消失或出现故障，那么如果问题本身没有代码，您的问题就会失去所有价值。 【参考方案1】：

您可能想看看 svgs，因为您可以为多边形的点设置动画并将其变形为所需的形状。

DEMO

DEMO With images and titles

此演示使用snap.svg 库来制作正方形并在点击事件上对其进行操作。~~目前未完成，存在一些错误，但您应该得到想法~~。

我完全重构了代码，感谢 rlemon 帮助我让它变得更好。我在最新的 FF 和 Chrome 中对其进行了测试，一位用户报告说它可以在带有 safari 的 iPhone 上运行。

这些项目是用多边形制成的，点击时会添加一个方形多边形，它的点会被一一动画化。

var items = [
  [ 1, 1,24, 1,24,24, 1,24],
  [26, 1,49, 1,49,24,26,24],
  [51, 1,74, 1,74,24,51,24],
  [76, 1,99, 1,99,24,76,24],
  [ 1, 26,24, 26,24,49, 1,49],
  [26, 26,49, 26,49,49,26,49],
  [51, 26,74, 26,74,49,51,49],
  [76, 26,99, 26,99,49,76,49],
  [ 1, 51,24, 51,24,74, 1,74],
  [26, 51,49, 51,49,74,26,74],
  [51, 51,74, 51,74,74,51,74],
  [76, 51,99, 51,99,74,76,74],
  [ 1, 76,24, 76,24,99, 1,99],
  [26, 76,49, 76,49,99,26,99],
  [51, 76,74, 76,74,99,51,99],
  [76, 76,99, 76,99,99,76,99]
],
    item = [],points= [],i, p=[],open = 0,
    s = Snap().attr(viewBox:"0 0 100 100","fill":"#585247");

function runAnimations(el) 
  if( !animationSequences.length ) return;
  var sequence = animationSequences.shift();
  el.animate(sequence,120,mina.linear, runAnimations.bind(null,el));



function register(x,i) 
  item[i] = s.polygon(items[i]);  
  item[i].click(function () 
    var featured = s.polygon(items[i]).attr("fill":"#585247");
    p = items[i];
    animationSequences = [
      "points": p[0]/2+","+p[1]/2+","+p[2]+","+p[3]+","+p[4]+","+p[5]+","+p[6]+","+p[7],
      "points": p[0]/3+","+p[1]/3+",100,0,100,100,"+p[6]+","+p[7],
      "points": p[0]/4+","+p[1]/4+",100,0,100,100,0,100",
      "points": "0,0,100,0,100,100,0,100",
    ];
    runAnimations(featured);
    featured.animate("fill":"#ACA696",300);
    featured.click(function()
      this.stop().animate("points":p,"fill":"#585247",200,mina.linear,featured.remove);
    );
  );

items.forEach(register);

*margin:0;padding:0;
bodybackground:#E3DFD2;
svgdisplay:block;

&lt;script src="http://thisisa.simple-url.com/js/snapsvg.js"&gt;&lt;/script&gt;

【讨论】：

感谢您的努力！我会在不同的浏览器上试试这个。【参考方案2】：

Clip-path 仅支持点值的数字，看起来您使用的是百分比/像素比例，这就是它在 Firefox 中失败的原因。

更改为整数值：

coordsString = 'polygon(0 0,123 0,' + coordArray[2] + ',' + coordArray[3] + ')';
$ov.css(
  '-webkit-clip-path': coordsString,
    'clip-path': coordsString
);

您需要从 coordArray 中删除像素引用并根据百分比计算实际 int 值。

【讨论】：

【参考方案3】：

我遇到了这个问题，我的剪辑元素在 iPhoneX 上没有显示为剪辑。

添加 webkit 为我解决了这个问题：

clip-path: polygon(0 0, 0% 100%, 100% 0); -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);

【讨论】：

【参考方案4】：

我已经测试了很多可能性，但根据http://caniuse.com/#search=polygon FF 不支持多边形（！）。我尝试了很多可能性，但每次 FF 开发工具都告诉我这不是一个正确的值。

我测试过的代码（来自你的 codepen）：

var $ov = $('.overlay');

$(document).on('click touchstart', '.inner', function()
  var coords, coordArray, coordsString;
  var windowWidth = window.innerWidth + "";
  coords = this.getBoundingClientRect();

  coordArray = [
    Math.floor(parseInt(coords.left)) + ' ' + Math.floor(parseInt(coords.top)) + '',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + ' ' + Math.ceil(parseInt(coords.top)) + '',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + ' ' + Math.ceil((parseInt(coords.top) + parseInt(coords.height) )) + '',
    Math.ceil(parseInt(coords.left)) + ' ' + Math.floor((parseInt(coords.top) + parseInt(coords.height) )) + ''
  ];


  coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';

  $ov.css(
    '-webkit-clip-path': coordsString,

    'clip-path': coordsString
  );

  setTimeout(function()
    $ov.addClass('show');
  ,50);

  setTimeout(function()
    coordsString = 'polygon(0 0,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,

      'clip-path': coordsString
    );
  ,100);
  setTimeout(function()
    coordsString = 'polygon(0 0 ,'+windowWidth+' 0,' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,

      'clip-path': coordsString
    );
  ,180);
  setTimeout(function()
    coordsString = 'polygon(0 0,'+windowWidth+' 0,'+windowWidth+' '+windowWidth+',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,

      'clip-path': coordsString
    );
  ,260);

  setTimeout(function()
    coordsString = 'polygon(0 0,'+windowWidth+' 0,'+windowWidth+' '+windowWidth+',0 '+windowWidth+')';
    $ov.css(
      '-webkit-clip-path': coordsString,

      'clip-path': coordsString
    );
  ,340);

  // reverse
  setTimeout(function()
    coordsString = 'polygon(0 0,'+windowWidth+' 0,'+windowWidth+' '+windowWidth+',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,

      'clip-path': coordsString
    );
  ,1500);

  setTimeout(function()
    coordsString = 'polygon(0 0,'+windowWidth+' 0,' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,

      'clip-path': coordsString
    );
  ,1580);
  setTimeout(function()
    coordsString = 'polygon(0 0,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,

      'clip-path': coordsString
    );
  ,1640);
  setTimeout(function()
    coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css(
      '-webkit-clip-path': coordsString,

      'clip-path': coordsString
    );
  ,1740);



   setTimeout(function()
    $ov.removeClass('show');
  ,2000);

);

【讨论】：

以上是关于如何在 FF 和 IOS 中使用剪辑路径多边形的主要内容，如果未能解决你的问题，请参考以下文章

如何在检查 CSS 位置后解决 Safari 9.1 转换剪辑路径的问题？

paperjs：剪辑两条路径

如何将 SVG 剪辑到笔划内部？

剪辑/剪切多边形外部的所有内容或用白色填充外部

iOS UIImage 剪辑到路径

如何从 Flash 中的 MovieClips 中获取多边形？