Question

我想用anime.js遮盖SVG形状的视频

HTML代码：

<svg class="home-svg-1" width="100%" height="100%" viewBox="0 0 1080 894" style="enable-background:new 0 0 1080 894;" xml:space="preserve">
  <!-- Background Morphing Object Object -->
  <path id="home-morphing-path-1" class="sundown" d="M1009.6,511.6c0,218.7-263.4,380.6-500.5,380.6S26.7,626.5,26.7,407.8S370.3,18.5,607.4,18.5S1009.6,292.9,1009.6,511.6z"/>

  <!-- Foreground Morphing Object (Morphing Path with Image) -->
  <g>
    <!-- Morphing Object with Image -->
    <defs>
      <path id="home-morphing-path-2" d="M1070.2,472.6c0,218.7-317.4,389.1-554.5,389.1S9.1,800.7,9.1,582.1S195.7,13,432.8,13S1070.2,253.9,1070.2,472.6z"/>
    </defs>
    <clipPath id="home-morphing-clippath">
      <use xlink:href="#home-morphing-path-2"  style="overflow:visible;"/>
    </clipPath>
    <g transform="matrix(1 0 0 1 1.862645e-09 0)" style="clip-path:url(#home-morphing-clippath);">
      <!-- Put Your Image Here in xlink:href="../path/to/image.jpg" Property -->
      <image style="overflow:visible;" xlink:href="https://cameronscookware.com/wp-content/uploads/2019/12/royal-purple-background-best-of-royal-purple-wallpaper-wallpapersafari-this-week-of-royal-purple-background.jpg"  transform="matrix(0.7198 0 0 0.7198 -2.581610e-02 -0.3868)"></image>
    </g>
  </g>
</svg>

CSS代码：

.sundown {
  fill: #ffffff;
}

JS代码：

$(function () {

  var morphing = anime({
    targets: '#home-morphing-path-2',
    d: [
      {value: 'M1052.2,541.3c0,218.7-387.1,333.1-624.3,333.1S10.6,544.9,10.6,326.2S579.5,34,816.6,34S1052.2,322.6,1052.2,541.3z'},
      {value: 'M1072.6,488.4c0,218.7-176.7,393.7-413.8,393.7S36.9,765.5,36.9,546.8S395.4,11.9,632.5,11.9S1072.6,269.7,1072.6,488.4z'},
      {value: 'M1027.1,447.6c0,218.7-248.4,432.3-485.5,432.3S19,633.1,19,414.5S357.1,18.5,594.2,18.5S1027.1,228.9,1027.1,447.6z'},
      {value: 'M1070.2,472.6c0,218.7-317.4,389.1-554.5,389.1S9.1,800.7,9.1,582.1S195.7,13,432.8,13S1070.2,253.9,1070.2,472.6z'},
    ],
    easing: 'easeOutQuad',
    duration: 9000,
    loop: true,
    autoplay: true
  });
  var morphing = anime({
    targets: '#home-morphing-path-1',
    d: [
      {value: 'M1009.6,511.6c0,218.7-263.4,380.6-500.5,380.6S52.6,623.8,52.6,405.1S370.3,18.5,607.4,18.5S1009.6,292.9,1009.6,511.6z'},
      {value: 'M1062.1,502.6c0,218.7-239.9,355.5-477,355.5S43.6,637.3,43.6,418.6S480.2,39,717.3,39S1062.1,283.9,1062.1,502.6z'},
      {value: 'M1022.4,500.3c0,218.7-243.7,379.6-480.8,379.6S19,633.1,19,414.5S238.5,45.1,475.6,45.1S1022.4,281.6,1022.4,500.3z'},
      {value: 'M1009.6,511.6c0,218.7-263.4,380.6-500.5,380.6S26.7,626.5,26.7,407.8S370.3,18.5,607.4,18.5S1009.6,292.9,1009.6,511.6z'},
    ],
    easing: 'easeOutQuad',
    duration: 9000,
    loop: true,
    autoplay: true
  });

});

我尝试将图像更改为HTML5视频标签，但是没有办法。如何显示视频而不是图像？

谢谢。

变形SVG遮罩视频

0 个答案: