Question

我有一个裁剪元素列表。我正在使用CSS3 剪切路径方法将图像剪切到SVG路径中。裁剪效果很好，但是在

safari（V 12.1.4）中，被裁剪的元素的位置在每个框中都会更改。

该元素在每张幻灯片上都移至左下角。

.product-slider {
  display: inline-block;
  transition: all 0.4s;
  background: none;
  height: 100%;
  border: 1px solid red;
  width: 256px;
  height: 248px;
}
.product-slider__image {
  width: 100%;
}
.product-slider__image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.clip-path_clipping1 {
  -webkit-clip-path: url(#clipping1);
  clip-path: url(#clipping1);
}

.clip-path_clipping2 {
  -webkit-clip-path: url(#clipping2);
  clip-path: url(#clipping2);
}

.clip-path_clipping3 {
  -webkit-clip-path: url(#clipping3);
  clip-path: url(#clipping3);
}

.clip-path_clipping4 {
  -webkit-clip-path: url(#clipping4);
  clip-path: url(#clipping4);
}

.clip-path_clipping5 {
  -webkit-clip-path: url(#clipping5);
  clip-path: url(#clipping5);
}

.clip-path_clipping6 {
  -webkit-clip-path: url(#clipping6);
  clip-path: url(#clipping6);
}

.clip-path_clipping7 {
  -webkit-clip-path: url(#clipping7);
  clip-path: url(#clipping7);
}

.clip-path_clipping8 {
  -webkit-clip-path: url(#clipping8);
  clip-path: url(#clipping8);
}

.clip-path_clipping9 {
  -webkit-clip-path: url(#clipping9);
  clip-path: url(#clipping9);
}

.clip-path_clipping10 {
  -webkit-clip-path: url(#clipping10);
  clip-path: url(#clipping10);
}

.svg-clip {
  position: absolute;
  opacity: 1;
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div style="width:2500px;">
<a href="#" class="product-slider">
                                <div class="product-slider__image-wrapper">

                                    <img class="product-slider__image clip-path_clipping1" src="https://placeimg.com/1000/1000/any" alt="">
                                    <svg class="svg-clip">
                                        <defs>
                                            <clipPath id="clipping1" data-clipping-rotate="" class="svg-clip__path" clipPathUnits="objectBoundingBox" style="transform: rotate(3deg) skew(9deg) scale(0.95);">
                                                <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                               
                            </a>
<a href="#" class="product-slider">
                                <div class="product-slider__image-wrapper">

                                    <img class="product-slider__image clip-path_clipping2" src="https://placeimg.com/1000/1000/any" alt="">
                                    <svg class="svg-clip">
                                        <defs>
                                            <clipPath id="clipping2" data-clipping-rotate="" class="svg-clip__path" clipPathUnits="objectBoundingBox" style="transform: rotate(3deg) skew(9deg) scale(0.95);">
                                                <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                               
                            </a>
<a href="#" class="product-slider">
                                <div class="product-slider__image-wrapper">

                                    <img class="product-slider__image clip-path_clipping3" src="https://placeimg.com/1000/1000/any" alt="">
                                    <svg class="svg-clip">
                                        <defs>
                                            <clipPath id="clipping3" data-clipping-rotate="" class="svg-clip__path" clipPathUnits="objectBoundingBox" style="transform: rotate(3deg) skew(9deg) scale(0.95);">
                                                <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                               
                            </a>
<a href="#" class="product-slider">
                                <div class="product-slider__image-wrapper">

                                    <img class="product-slider__image clip-path_clipping4" src="https://placeimg.com/1000/1000/any" alt="">
                                    <svg class="svg-clip">
                                        <defs>
                                            <clipPath id="clipping4" data-clipping-rotate="" class="svg-clip__path" clipPathUnits="objectBoundingBox" style="transform: rotate(3deg) skew(9deg) scale(0.95);">
                                                <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                               
                            </a>
<a href="#" class="product-slider">
                                <div class="product-slider__image-wrapper">

                                    <img class="product-slider__image clip-path_clipping5" src="https://placeimg.com/1000/1000/any" alt="">
                                    <svg class="svg-clip">
                                        <defs>
                                            <clipPath id="clipping5" data-clipping-rotate="" class="svg-clip__path" clipPathUnits="objectBoundingBox" style="transform: rotate(3deg) skew(9deg) scale(0.95);">
                                                <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                               
                            </a>
</div>

This is the codepen link

有人可以帮助我解决此问题吗？预先感谢。

Answer 1

对我来说很好。已在Safari V.12.0.1中测试

您使用哪个Safarie？

Screenshot - CodePen

循环中的剪切路径在Safari中无法正常工作

1 个答案: