我正在尝试用淡入淡出的动画显示图像的一部分。所以这就是我所做的:
结果是:图像有一个蒙版,只显示了那 2 个部分。
一切都很好,但现在我必须为它们制作动画,而且我找不到任何可以帮助我的东西。可以吗?
这是我的代码
<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>
但是如果路径被剪切,不透明度似乎不起作用
[编辑]
我必须用不同的持续时间和延迟为它们设置动画,所以我不能只为图像设置动画
[想要的结果]
这应该是最终的结果。同一张图片,不同的蒙版,不同的淡入淡出时间
答案 0 :(得分:0)
解决了!!!
解决方案不是剪切图像路径,而是将图像设置为路径背景,然后为路径设置动画。
代码如下:
<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>