小编h0b*_*bb5的帖子

我在标头上有一个内嵌svg和背景图像.我正在使用css clip-path来"剪切"svg动画,下面是图片.

我有它在firefox和chrome工作得很好,但safari根本不应用任何剪辑/屏蔽.

我在开始这个项目之前检查了caniuse规范,并且它说明了适用于chrome的相同规则和例外,我刚刚使用chrome进行测试并且它起作用,所以我继续对它进行预测,safari会有相同的处理方式.

我一直在试图弄清楚如何让剪辑在野生动物园中正常工作而无济于事.

我怎样才能让它在野生动物园中发挥作用？笔供参考:https: //codepen.io/H0BB5/pen/Xpawgp

HTML

<clipPath id="cross">
    <rect y="110" x="137" width="90" height="90"/>
    <rect x="0" y="110" width="90" height="90"/>
    <rect x="137" y="0" width="90" height="90"/>
    <rect x="0" y="0" width="90" height="90"/>
 </clipPath>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

我有一系列有6张图片的文物.

var artifacts = [
  'http://placehold.it/50x150',
  'http://placehold.it/100x125',
  'http://placehold.it/150x100',
  'http://placehold.it/200x50',
  'http://placehold.it/150x75',
  'http://placehold.it/100x100'
];

我正在尝试将工件作为背景图像添加到列表中的每个列表项.

<ul class="slick-dots">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

如果列表具有超过工件量的数量,它将从头开始并将工件添加到数组的[0]位置.

出于某种原因,我无法理解我应该如何使用javascript来解决这个问题.

Codepen:http://codepen.io/H0BB5/pen/MJYgdz