Chrome/Chromium中的SVG剪輯路徑影片錯誤

我是使用 CSS 為 SVG 制作影片的新手，我正在嘗試創建“眨眼”效果。這就是我設法做到的：

https://codepen.io/pablo-m/pen/jOGeMpJ。

（編輯 3：添加代碼）

SVG

<svg id="composicion" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571.8 761.82">
  <g id="Ojito">
    <rect x="190.37" y="288.55" width="192.7" height="91.76" fill="#606060" />
    <ellipse id="outer-eye" cx="292.3" cy="335.43" rx="44.72" ry="30.01" fill="#3caa56" />
    <circle id="inner-eye" cx="291.69" cy="334.82" r="18.38" fill="#efefef" />
  </g>
</svg>

SCSS

#composicion {
  #Ojito {
    @keyframes inner-eye-blink {
      0%,
      82%,
      95%,
      100% {
        clip-path: ellipse(75% 55%);
      }
      90% {
        clip-path: ellipse(75% 0);
      }
    }

    @keyframes outer-eye-blink {
      0%,
      80%,
      100% {
        ry: 30.01px;
      }
      90% {
        ry: 1px;
      }
    }

    & #outer-eye {
      animation: outer-eye-blink 8s ease infinite;
    }

    & #inner-eye {
      animation: inner-eye-blink 8s infinite;
    }
  }
}

該影片在 Firefox v95.0.2 和 Safari v15.1 上運行良好。但是，在 Chrome/Chromium v??97.0.4692.71（截至今天，最新版本）上卻沒有。看起來，每當我clip-path用 css 應用 a 時，白色就會circle消失。我還注意到這種行為在 Chrome/Chromium v??96.0.4664.93 上不會發生。我做錯了什么或在最新版本的 Chrome/Chromium 中做了什么改變？編輯：如果我做的一切都正確，有人知道解決方法嗎？

這是我在 SO 中的第一個問題，所以如果我遺漏了任何細節，請告訴我。

謝謝！

編輯：我查看了 Chromium 的錯誤跟蹤器，但在那里沒有發現任何相關問題。

編輯 2：報告了 Chromium 錯誤

uj5u.com熱心網友回復：

在這種情況下，使用剪輯路徑或蒙版是個好主意，因為您有更多需要影片/蒙版的元素。在本例中，我選擇了 CSS 剪輯路徑，因為您從 CSS 中的影片開始。

正如我所見，我的示例在 Chrome 97 中運行良好。

另一種選擇是將SVG 影片與 SMIL一起使用。我希望它也能在 Chrome 中作業。在某些情況下，它比 CSS 中的 mask 或 clip-path 更靈活。

我使用SvgPathEditor來構建路徑。

@keyframes eye-blink {
  0%,
  100% {
    clip-path: path('M 3 5 C 6 6 9 7 13 5 C 9 2 6 3 3 5');
  }
  50% {
    clip-path: path('M 3 5 C 6 5 9 5 13 5 C 9 5 6 5 3 5');
  }
}

#Ojito g {
  clip-path: path('M 3 5 C 6 6 9 7 13 5 C 9 2 6 3 3 5');
  animation: eye-blink 4s ease infinite;
}

<svg id="composicion" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10" width="400">
  <g id="Ojito">
    <rect width="16" height="10" fill="#606060" />
    <g>
      <rect width="16" height="10" fill="white" />
      <circle id="inner-eye" cx="8" cy="4.8" r="2" fill="#333" />
      <circle id="inner-eye" cx="8" cy="4.8" r="1.2" fill="black" />
    </g>
  </g>
</svg>

uj5u.com熱心網友回復：

看起來這確實是一個 Chrome 錯誤。但是，我設法找到了解決問題的解決方法：https ://codepen.io/pablo-m/pen/WNZYeoB

SCSS

#composicion {
  #Ojito {
    @keyframes inner-eye-move {
      0%,
      5%,
      20%,
      25%,
      40%,
      45%,
      50%,
      60%,
      65%,
      80%,
      85%,
      100% {
        cx: 291.69px;
        cy: 334.82px;
      }
      10%,
      15% {
        cx: 273.69px;
        cy: 328.82px;
      }
      30%,
      35% {
        cx: 291.69px;
        cy: 342.82px;
      }
      70%,
      75% {
        cx: 310.69px;
        cy: 328.82px;
      }
      90%,
      95% {
        cx: 307.69px;
        cy: 338.82px;
      }
    }

    @keyframes outer-eye-blink {
      0%,
      80%,
      100% {
        ry: 30.01px;
      }
      90% {
        ry: 1px;
      }
    }

    & .outer-eye {
      animation: outer-eye-blink 8s ease infinite;
    }

    & #inner-eye {
      clip-path: url(#eyeClip);
      animation: inner-eye-move 50s ease infinite;
    }
  }
}

SVG

<svg id="composicion" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571.8 761.82">
  <g id="Ojito">
    <rect x="190.37" y="288.55" width="192.7" height="91.76" fill="#606060" />
    <clipPath id="eyeClip">
      <ellipse class="outer-eye" cx="292.3" cy="335.43" rx="44.72" ry="30.01" />
    </clipPath>
    <ellipse class="outer-eye" cx="292.3" cy="335.43" rx="44.72" ry="30.01" fill="#3caa56" />
    <circle id="inner-eye" cx="291.69" cy="334.82" r="18.38" fill="#efefef" />
  </g>
</svg>

當我在 Chrome 錯誤跟蹤器上發布錯誤時，我會編輯我的問題和答案。

編輯：報告了 Chromium 錯誤

編輯 2：對于另一個很好的解決方法，請查看@chrwahl 的答案

標籤：

上一篇：更改D3圖表中軸線的顏色

下一篇：將SVG嵌入Inkscape