admin管理员组

文章数量:1026925

I've been trying to place an embedded video into SVG element so it plays automatically on the background. I was able to fill the SVG with an image the way I wanted using the pattern, but I can't do the same thing with the video. I'd prefer the most simple solution (such as fill:url(#image) in the example) that will do the trick. Any help?

svg {
  width: 300px;
  height: 300px;
}
  <svg version="1.1" id="Layer_1" xmlns="" xmlns: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=".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>

I've been trying to place an embedded video into SVG element so it plays automatically on the background. I was able to fill the SVG with an image the way I wanted using the pattern, but I can't do the same thing with the video. I'd prefer the most simple solution (such as fill:url(#image) in the example) that will do the trick. Any help?

svg {
  width: 300px;
  height: 300px;
}
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/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./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>

Fiddle: https://jsfiddle/vp2fhwy7/

  • javascript
  • jquery
  • css
  • svg
Share Improve this question edited Apr 4, 2017 at 12:32 Dwhitz 1,2708 gold badges27 silver badges39 bronze badges asked Apr 4, 2017 at 12:18 followthemadhatfollowthemadhat 1091 gold badge2 silver badges10 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

You can embed a video with the foreignobject tag

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

https://jsfiddle/vp2fhwy7/1/

use a 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./embed/W4PR4vNOxfE" frameborder="0" allowfullscreen></iframe>

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

I've been trying to place an embedded video into SVG element so it plays automatically on the background. I was able to fill the SVG with an image the way I wanted using the pattern, but I can't do the same thing with the video. I'd prefer the most simple solution (such as fill:url(#image) in the example) that will do the trick. Any help?

svg {
  width: 300px;
  height: 300px;
}
  <svg version="1.1" id="Layer_1" xmlns="" xmlns: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=".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>

I've been trying to place an embedded video into SVG element so it plays automatically on the background. I was able to fill the SVG with an image the way I wanted using the pattern, but I can't do the same thing with the video. I'd prefer the most simple solution (such as fill:url(#image) in the example) that will do the trick. Any help?

svg {
  width: 300px;
  height: 300px;
}
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/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./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>

Fiddle: https://jsfiddle/vp2fhwy7/

  • javascript
  • jquery
  • css
  • svg
Share Improve this question edited Apr 4, 2017 at 12:32 Dwhitz 1,2708 gold badges27 silver badges39 bronze badges asked Apr 4, 2017 at 12:18 followthemadhatfollowthemadhat 1091 gold badge2 silver badges10 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

You can embed a video with the foreignobject tag

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

https://jsfiddle/vp2fhwy7/1/

use a 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./embed/W4PR4vNOxfE" frameborder="0" allowfullscreen></iframe>

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

本文标签： javascriptHow to fill SVG with videoStack Overflow

版权声明：本文标题：javascript - How to fill SVG with video? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745654458a2161514.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。