Question

我有一张用SVG clip-path剪辑的图片。我正试图移动clip-path，但translateX图像消失了。看起来问题出在clipPathUnits="objectBoundingBox"中。我该如何移动路径？

svg {
  position: absolute;
}

picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* #shape {
  transform: translateX(1px);
} */

<svg class="hero-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2560px" height="1164px" viewBox="0 0 1280 582" version="1.1">
        <clipPath id="mask-path" clipPathUnits="objectBoundingBox">
            <path 
                id="shape" 
                fill="#E5EFF7"
                d='M0, 0 L1, 0 L1, 0.4996753848797251 C0.909334453125, 0.6 0.7926289296875, 0.75 0.6498834375, 0.6158118900343643 C0.4357651953125, 0.401758644329897 0.366062217578125, 0.5330226374570446 0.20884810625, 0.5184233780068728 C0.104038698828125, 0.5086905378006873 0.034422663203124995, 0.4739563067010309 0, 0.4142206847079038 Z'
            />  
        </clipPath>
    </svg>
<picture id="hero-bg" style="clip-path: url(#mask-path); -webkit-clip-path: url(#mask-path);">
  <img src="https://www.google.es/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Doctors" style="width:100%;">
</picture>

我使用谷歌浏览器版本66.0.3359.181。在Safari中translateX什么都不做。

有一个小提琴：https://jsfiddle.net/yhw8soq0/

感谢。

无法转换SVG剪辑路径

0 个答案: