如何用視頻填充SVG？

我一直在嘗試將嵌入式視頻放入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？

回答

相關問題