Question

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

＆＃13;

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

＆＃13;

  <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>

＆＃13;

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

Answer 1

使用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) }

Answer 2

您可以使用 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/

如何用视频填充SVG？

2 个答案: