动画剪辑到图像的 SVG 路径

Question

我正在尝试显示带有淡入淡出动画的图像部分。这就是我所做的：

我创建了一个有 2 个路径的 SVG（我想用淡入淡出动画显示图像的 2 个部分）
我将 SVG 裁剪到图像中

结果是：图像有一个蒙版，只显示了这两个部分。

一切都很好，但现在我必须为它们制作动画，但我找不到任何对我有帮助的东西。可以吗？

这是我的代码

<style>
img {
  clip-path: url(#clip);
  width: 100%;
}
</style>

<img src="https://wikitesti.com/wp-content/uploads/2020/11/yellow-is-the-color-of.jpg"/>

<svg xmlns="http://www.w3.org/2000/svg"
  width="3.33333in" height="2.5in"
  viewBox="0 0 1000 750">
     <clipPath id="clip" clipPathUnits="objectBoundingBox" transform="scale(0.001, 0.0013333333333333)">
       <path id="path"  d="M 416.00,140.00
       C 426.58,139.14 423.70,137.74 438.00,138.00
         440.13,138.04 442.65,137.95 444.26,139.60
         446.32,141.71 446.00,146.23 446.00,149.00
         446.00,149.00 446.00,175.00 446.00,175.00
         446.00,175.00 452.00,230.00 452.00,230.00
         452.00,230.00 452.00,242.00 452.00,242.00
         452.00,242.00 454.66,271.00 454.66,271.00
         454.66,271.00 454.09,277.00 454.09,277.00
         454.09,277.00 458.25,312.00 458.25,312.00
         459.85,321.79 462.98,335.77 463.00,345.00
         463.00,345.00 465.00,372.00 465.00,372.00
         465.02,385.91 468.58,409.91 462.00,422.00
         462.00,422.00 435.08,408.00 435.08,408.00
         435.08,408.00 435.08,397.00 435.08,397.00
         435.08,397.00 436.82,381.00 436.82,381.00
         436.82,381.00 433.17,360.00 433.17,360.00
         433.17,360.00 431.48,338.00 431.48,338.00
         431.48,338.00 424.17,308.00 424.17,308.00
         424.17,308.00 424.95,294.00 424.95,294.00
         424.95,294.00 424.95,283.00 424.95,283.00
         424.95,283.00 424.09,273.00 424.09,273.00
         424.09,273.00 421.91,239.00 421.91,239.00
         421.91,239.00 421.00,227.00 421.00,227.00
         421.00,227.00 421.00,202.00 421.00,202.00
         421.00,202.00 420.00,190.00 420.00,190.00
         420.00,190.00 420.00,179.00 420.00,179.00
         420.00,179.00 419.00,165.00 419.00,165.00
         419.00,165.00 417.79,148.00 417.79,148.00
         417.79,148.00 416.00,140.00 416.00,140.00 Z" fill="#C4C4C4"/>

         <path class="fade-in three" id="path2" d="M 530.00,168.00
         C 530.00,168.00 588.00,168.00 588.00,168.00
         588.00,168.00 588.00,468.00 588.00,468.00
         588.00,468.00 530.00,468.00 530.00,468.00
         530.00,468.00 530.00,168.00 530.00,168.00 Z" fill="#C4C4C4" />
     </clipPath>
</svg>

谢谢。

[编辑]

我试过这样做：

<path....>
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</path>

但如果路径被剪切，不透明度似乎不起作用

[编辑]

我必须用不同的持续时间和延迟为它们制作动画，所以我不能只为图像制作动画

[期望的结果]

这应该是最终的结果。同一张图片不同蒙版淡入淡出时间不同

Answer 1

已解决！！！

解决方案不是剪切图像的路径，而是将图像设置为路径背景，然后为路径设置动画。

代码如下：

<svg xmlns="http://www.w3.org/2000/svg"
     width="50%" height="50%"
     viewBox="0 0 1000 750">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="1000" height="750">
      <image href="image_to_mask.jpg" x="0" y="0" width="1000" height="750" />
    </pattern>
  </defs>
  <path id="path1" opacity="0" d="M 296.00,277.00
           C 296.00,277.00 699.00,277.00 699.00,277.00
             699.00,277.00 699.00,353.00 699.00,353.00
             699.00,353.00 296.00,353.00 296.00,353.00
             296.00,353.00 296.00,277.00 296.00,277.00 Z" fill="url(#img1)">
    <animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="0.5s" fill="freeze"/>
  </path>
  
  <path id="path2" opacity="0" d="M 222.00,466.00
           C 222.00,466.00 792.00,466.00 792.00,466.00
             792.00,466.00 792.00,580.00 792.00,580.00
             792.00,580.00 222.00,580.00 222.00,580.00
             222.00,580.00 222.00,466.00 222.00,466.00 Z" fill="url(#img1)">
    <animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="0.5s" begin="0.5s" fill="freeze"/>
  </path>
</svg>

动画剪辑到图像的 SVG 路径

Animate SVG paths clipped to an image

html

animation

svg

path

clip-path