文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在svg元素上播放html 5视频？

问如何在svg元素上播放html 5视频？
EN

Stack Overflow用户

提问于 2015-06-19 13:23:55

回答 1查看 1.8K关注 0票数 1

我有一个六边形的svg元素，里面有一个图像作为图案(工人图片)。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1400" height="1550" viewBox="0 0 140 155" class="svgMember memberPicLeft" id="erikSvg">
  <defs>
     <pattern id="svgImg" x="0" y="0" height="1" width="1">
       <image x="-10" y="-40" width="120%" height="160% xlink:href="assets/img/picture.jpg"></image>
     </pattern>
  </defs>
  <path fill="url(#svgImg)" 
    d="M69.999,153.831c-1.797,0-3.596-0.466-5.208-1.396L7.708,119.479c-3.222-1.861-5.208-5.3-5.208-9.021V44.542
    c0-3.721,1.986-7.159,5.208-9.021L64.791,2.564c1.612-0.93,3.411-1.396,5.208-1.396c1.799,0,3.598,0.466,5.209,1.396l57.083,32.957
    c3.224,1.861,5.21,5.3,5.21,9.021v65.916c0,3.721-1.986,7.159-5.21,9.021l-57.083,32.957
    C73.596,153.365,71.797,153.831,69.999,153.831z"/>
</svg>

如何将视频添加到svg元素中，以便在悬停时视频将播放由元素边框包含的元素(-webkit-掩码-图像)。我试着添加视频标签：

<video id="myVideo" autoplay>
   <source id="mp4_src" src="assets/video/video.mp4" type="video/mp4">
</video>

当然，这是行不通的。在谷歌上没有找到任何解决方案。谢谢你的帮助！

javascript

html

css

svg

html5-video

回答 1

Stack Overflow用户

发布于 2015-06-19 14:44:24

SVG不支持视频元素。我见过一些已经支持它的Opera和Firefox的实验性版本，但是普通的浏览器不支持。

您可以通过使用HTML、CSS和Javascript附加一个视频作为覆盖。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30939323

复制

相似问题

问如何在svg元素上播放html 5视频？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在svg元素上播放html 5视频？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在svg元素上播放html 5视频？
EN