如何用视频填充SVG？

2017-04-04 53 views 2 likes

我一直在尝试将嵌入式视频放入SVG元素，以便在后台自动播放。我能够按照我想要的方式使用图案填充SVG图像，但我无法对视频做同样的事情。我更喜欢最简单的解决方案（例如fill：url（#image））。任何帮助？如何用视频填充SVG？

svg { 
 
    width: 300px; 
 
    height: 300px; 
 
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
       viewBox="0 0 534 503" style="enable-background:new 0 0 534 503;" xml:space="preserve"> 
 
       <defs> 
 
       <pattern id="image" patternUnits="userSpaceOnUse" height="100%" width="100%"> 
 
        <image x="0" y="0" height="100%" width="100%" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image> 
 
       </pattern> 
 
       </defs> 
 
       <style type="text/css"> 
 
       .st0{fill:none;enable-background:new ;} 
 
       .st1{fill:url(#image);stroke:#ccc;stroke-width:20;stroke-miterlimit:10;} 
 
       </style> 
 
       <path class="st0" d="z"/> 
 
       <polygon class="st1" points="268,81 333,12 457,12 524,68.5 524,206 268,491 10,207 10,66 77.5,12 202,12 "/> 
 
      </svg>

小提琴：https://jsfiddle.net/vp2fhwy7/

来源

2017-04-04 followthemadhat

回答

您可以嵌入视频与foreignobject标签

<foreignObject width="853" x="0"y="0" height="480"> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
     <iframe width="853" height="480" src="//www.youtube.com/embed/dkiuuMfoGvM" frameborder="0" allowfullscreen></iframe> 
     </body> 
</foreignObject>

https://jsfiddle.net/vp2fhwy7/1/

来源

2017-04-04 12:27:40 userfloflo

但我需要的视频，只有里面的心脏 – followthemadhat

使用clipPath

SVG <clipPath id="clip"> <polygon class="st1" points="268,81 333,12 457,12 524,68.5 524,206 268,491 10,207 10,66 77.5,12 202,12 "/> </clipPath>

HTML <iframe width="560" height="315" src="https://www.youtube.com/embed/W4PR4vNOxfE" frameborder="0" allowfullscreen></iframe>

CSS iframe { -webkit-clip-path:url(#clip) }

来源

2017-04-04 12:34:36 Uzi

可以请你更新我的小提琴视频只留在内心？ – followthemadhat

在这里你去 - https://jsfiddle.net/vp2fhwy7/4/ – Uzi

如何用视频填充SVG？

回答

相关问题