色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何讓SVG剪輯路徑在真實的iPhoneXR上工作

CSS
錢琪琛2年前8瀏覽0評論

我有下面的html和css: https://codepen.io/marceltudor/pen/xxJBqRO

它在android上運行良好。這意味著它顯示了剪輯部分，而沒有顯示整個圖片。 在Edge和Chrome上用developper tools模擬iPhone XR，效果很好。

然而，在我更新到最新的iOS 16.4.1的真正的iPhone XR上，我看到了下面的完整圖像，因此沒有剪輯。real iPhone XR screen

當(dāng)我最小化Safari并打開另一個應(yīng)用程序，然后再次打開Safari時，我看到了剪輯。 我需要從一開始就看到剪報，而不僅僅是在我切換到另一個應(yīng)用程序并回到Safari之后。我已經(jīng)添加了-網(wǎng)絡(luò)工具包-...

我在這里也復(fù)制了代碼:

.clip-svg {
  clip-path: url(#myClip);
  -webkit-clip-path: url(#myClip);
  animation: fadeInAnimation ease 3s;
  -webkit-animation: fadeInAnimation ease 3s;
}

#image-overlay {
  position: absolute;
}

#image {
  opacity: 0.035;
  -webkit-opacity: 0.035;
}

.container {
  position: relative;
}

#overlay {
  padding: 10px;
  inset: 0;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-opacity: 1;
  }
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="overlay.css">
</head>

<body>
  <div class="container">
    <img id="image-overlay" class="clip-svg" src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" />
    <img src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" id="image" />

  </div>

  <svg>
          <defs>
            <clipPath id="myClip" clipPathUnits="objectBoundingBox">
              <polygon points="0,0 .4,0 .4,.4 0,.4"/>
              <circle cx=".2" cy=".42" r=".04"/>
              <circle cx=".4" cy=".2" r=".04"/>
              <polygon points=".6,.6 1,.6 1,1 .6,1" />    
              <circle cx=".8" cy=".6" r=".04"/>
              <circle cx=".6" cy=".8" r=".04"/>
              <polygon points=".6,0 1,0 1,.4 .6,.4" />
              <circle cx=".6" cy=".2" r=".04"/>
              <circle cx=".8" cy=".4" r=".04"/>
              <polygon points="0,.6 .4,.6 .4,1 0,1"/>
              <circle cx=".2" cy=".6" r=".04"/>
              <circle cx=".4" cy=".8" r=".04"/>

            </clipPath>
          </defs>
</svg>


</html>