使用基于移动 Chrome 的浏览器使用 CSS 和 JS 移动屏蔽的 svg

Question

我有一个 SVG object。

<svg version="1.1" viewBox="0 0 200 172.29" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <g transform="matrix(2.2495 0 0 2.2495 -12.814 -35.835)" stroke="#333" stroke-miterlimit="10">
    <path d="m78.259 50.602c13.319 2.133 14.25-10.228 14.241-13.55" fill="none" stroke-linecap="round" stroke-width="4.208"/>
    <path d="m18.922 56.574h-8.679a2.743 2.743 0 0 1-2.743-2.743v-7.138a2.743 2.743 0 0 1 2.743-2.743h8.679z" fill="#f47e60" stroke-width="3.607"/>
  </g>
  <g id="pig" transform="matrix(2.2495 0 0 2.2495 -12.814 -35.835)">
    <g stroke="#333" stroke-miterlimit="10">
      <path d="m28.203 82.098-4.803-1.462a3.1 3.1 0 0 1-2.063-3.868l4.713-15.483 10.734 3.268-4.713 15.483a3.1 3.1 0 0 1-3.868 2.062z" fill="#f47e60" stroke-width="4.097"/>
       <path d="m66.242 82.072 5.22-1.589a3.19 3.19 0 0 0 2.123-3.982l-4.687-15.396-11.325 3.447 4.687 15.396a3.191 3.191 0 0 0 3.982 2.124z" fill="#f47e60" stroke-width="4.208"/>
       <path d="m47.707 22.636c-4.499 0-8.788 0.727-12.712 2.035a11.28 11.28 0 0 0-0.945-1.545c-1.313-1.822-3.247-3.34-5.477-4.281-2.24-0.929-4.738-1.33-7.275-0.916 1.534 1.694 3.452 6.355 3.452 6.355s1.017 2.311 2 4.334c-7.785 5.062-12.784 12.872-12.784 21.644 0 15.257 15.106 27.626 33.74 27.626s33.74-12.369 33.74-27.626c1e-3 -15.258-15.105-27.626-33.739-27.626z" fill="#f8b26a" stroke-linejoin="round" stroke-width="3.673"/>
    </g>
  </g>
  <g transform="matrix(2.2495 0 0 2.2495 -12.814 -35.835)">
    <path d="m57.851 31.201a35.536 35.536 0 0 0-10.145-1.457c-2.78 0-5.468 0.315-8.019 0.902" fill="#f8b26a" stroke="#333" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3.673"/>
    <circle cx="27.608" cy="42.441" r="3.574" fill="#333"/>
  </g>
  <path id="pigFill" d="m77.485 10.578a2.6994 3.5305 0 0 0-2.2803 1.5975l-2.1748 4.3372a2.6994 3.5305 0 0 0 0.08348 4.0307h-4.4682l-0.03515-0.61297a2.7039 3.5362 0 0 0-2.9041-3.2552l-3.9542 0.39936a2.7039 3.5362 0 0 0-2.4956 3.4689h-29.179v116.56h129.39v-116.56h-12.342l0.65024-1.8947c0.49715-1.4534-3.1e-4 -3.1577-1.1116-3.808l-4.5341-2.6515a2.2045 2.8831 0 0 0-2.9129 1.4535l-2.3593 6.9005h-1.8673a2.6994 3.5305 0 0 0 0.0396-1.8621l-0.94903-5.0384a2.7017 3.5333 0 0 0-3.2688-2.5866l-14.912 4.7923-1.4323-3.0928a2.7039 3.5362 0 0 0-3.7126-1.1888l-3.3918 2.6841a2.7039 3.5362 0 0 0-0.99296 4.6622l-1.2522 0.404a2.7017 3.5333 0 0 0-1.4631 1.2259h-0.61511l-3.4928-5.8884a2.7039 3.5362 0 0 0-3.7916-0.6269l-3.1327 3.1762a2.7039 3.5362 0 0 0-1.0105 3.3389h-1.7355l-10.936-9.3851a2.6994 3.5305 0 0 0-1.4631-0.58047z" fill="#66503a" stroke-width="1.4711"/>
</svg>

带有使用 CSS 声明的屏蔽部分

#pigFill {
  clip-path: ellipse(64px 54px at 64px -36px);
  transform: translate(0px,100px);
}

我写了一段 JS 来移动面具和它的内容

      $("#pigFill").css("clip-path", "ellipse(64px 54px at 64px "+clippathVal+"px)");
      $("#pigFill").css("transform", "translate(0px,"+translateVal+"px)");

这是codepen POC https://codepen.io/Chagam/pen/wvozYPr

它工作正常，除了 android 上的基于 chrome 的浏览器，例如 Brave 或 Chrome。 动画部分的 position 和尺寸有误。 transform: translate(0px,100px); 似乎打破了一切。 但它在 firefox 和 safari 上按预期工作。

有没有其他方法可以在所有浏览器上获得相同的结果？

Answer 1

找到了一种让它在每个浏览器上工作的方法！

这是完整的修复： https://codepen.io/Chagam/pen/jOVyRYO

基本上将“翻译”更改为“翻译Y”，因为我只垂直翻译。

#pigFill {
    clip-path: ellipse(50% 43% at 50% -43%);
    transform: translateY(70%);
}

$("#pigFill").css("clip-path", "ellipse(50% 43% at 50% "+clippathVal+"%)");
$("#pigFill").css("transform", "translateY("+translateVal+"%)");

我还将翻译和剪辑路径值从 px 更改为 %