Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
353 views
in Technique[技术] by (71.8m points)

html - SVG: exchange image with mp4 video - problems with clipPath - video not showing

I am trying to display a Video inside a svg shape. I have managed to display an image inside the shape with the pattern and image tags. Now I have to switch to a .mp4 video.

My code

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 369.2 560.08">
  <defs>
    <style>
      .cls-1 {
        fill: none;
      }

      .cls-2 {
        clip-path: url(#clip-path);
      }

      .cls-3 {
        fill: #1c2b32;
      }

      .cls-4 {
        /*image works without problems*/
        fill: url(#img1);

        /*video does not work*/
        clip-path: url(#videoPita);
        -webkit-clip-path: url(#videoPita);
      }
    </style>

    <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%" viewBox="0 0 624 800" preserveAspectRatio="xMidYMid slice">
    <image href="image.png" x="0" y="0" width="600" height="700" />
  </pattern>

    <!--Trying with the video-->
    <!-- <foreignObject id="videoPita" x="0" y="0" requiredExtensions="http://www.w3.org/1999/xhtml" width="100" height="100">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <video width="" height="" controls="">
            <source src="video.mp4" type="video/mp4">
        </video>
      </body>
    </foreignObject> -->
    

    <clipPath id="clip-path">
      <rect class="cls-1" x="130.33" y="378.12" width="108.54" height="100.88" />
    </clipPath>
  </defs>
  <g id="Ebene_2" data-name="Ebene 2">
    <g id="Ebene_1-2" data-name="Ebene 1">
      <g class="cls-2">
        <path class="cls-3" d="M172.35,478.63h-69V479h69c0-.06,0-.12,0-.19S172.35,478.69,172.35,478.63Z" />
        <path class="cls-3" d="M196.85,479h69v-.38h-69c0,.06,0,.13,0,.19S196.85,479,196.85,479Z" />
        <path class="cls-3" d="M109.45,509.74l.15.36,63.75-26.41c0-.12-.1-.24-.14-.36Z" />
        <path class="cls-3" d="M259.75,447.9l-.15-.35L195.85,474l.14.36Z" />
        <path class="cls-3" d="M184.79,466.57v-69h-.38v69h.38Z" />
        <path class="cls-3" d="M184.41,491.07v69h.38v-69h-.38Z" />
        <path class="cls-3" d="M215.52,554l.35-.15-26.4-63.75-.36.14Z" />
        <path class="cls-3" d="M153.68,403.67l-.35.15,26.4,63.75.36-.14Z" />
        <path class="cls-3" d="M193.4,470.29l48.79-48.79-.27-.27L193.13,470Z" />
        <path class="cls-3" d="M175.8,487.35,127,536.14l.28.28,48.79-48.8Z" />
        <path class="cls-3" d="M215.87,403.82l-.35-.15-26.41,63.76.36.14Z" />
        <path class="cls-3" d="M153.33,553.82l.35.15,26.41-63.76-.36-.14Z" />
        <path class="cls-3" d="M176.07,470l-48.79-48.79-.28.27,48.8,48.8Z" />
        <path class="cls-3" d="M193.13,487.62l48.79,48.8.27-.28L193.4,487.35Z" />
        <path class="cls-3" d="M109.6,447.55l-.15.35,63.76,26.41c0-.12.09-.24.14-.36Z" />
        <path class="cls-3" d="M259.6,510.1l.15-.36L196,483.33l-.14.36Z" />
        <path class="cls-3" d="M264.33,463.16l-.07-.38-67.68,13.46c0,.13,0,.25.07.38Z" />
        <path class="cls-3" d="M104.86,494.49l.08.37,67.68-13.46c0-.12-.05-.25-.07-.38Z" />
        <path class="cls-3" d="M252.27,433.84l-.21-.32-57.38,38.33.21.32Z" />
        <path class="cls-3" d="M116.93,523.81l.21.32,57.38-38.34c-.08-.11-.14-.21-.21-.32Z" />
        <path class="cls-3" d="M186.8,490.87l13.46,67.69.38-.08-4-20.34h0l-9.41-47.34Z" />
        <path class="cls-3" d="M182.4,466.77l-13.47-67.68-.37.07,4.05,20.35h0L182,466.84Z" />
        <path class="cls-3" d="M139.61,411.15l-.32.21,38.34,57.38.32-.21Z" />
        <path class="cls-3" d="M229.58,546.49l.32-.21L191.57,488.9l-.32.21Z" />
        <path class="cls-3" d="M139.29,546.28l.32.21L178,489.11l-.32-.21Z" />
        <path class="cls-3" d="M229.9,411.36l-.32-.21-38.33,57.38.32.21Z" />
        <path class="cls-3" d="M168.56,558.48l.37.08,13.47-67.69-.38-.07Z" />
        <path class="cls-3" d="M200.64,399.16l-.38-.07L186.8,466.77l.38.07Z" />
        <path class="cls-3" d="M265.48,471l0-.38-68.68,6.77c0,.13,0,.25,0,.38Z" />
        <path class="cls-3" d="M103.71,486.6l0,.38,68.67-6.77,0-.38Z" />
        <path class="cls-3" d="M112.85,517l.18.34,60.85-32.53c-.06-.11-.12-.23-.17-.34Z" />
        <path class="cls-3" d="M256.35,440.68l-.18-.34-60.85,32.54.17.33Z" />
        <path class="cls-3" d="M236.29,416.12l-.29-.24-43.78,53.35.3.24Z" />
        <path class="cls-3" d="M132.91,541.52l.29.24L177,488.41l-.3-.24Z" />
        <path class="cls-3" d="M208.36,401.12,208,401l-20,66,.37.11Z" />
        <path class="cls-3" d="M160.84,556.53l.36.11,20-66-.37-.1Z" />
        <path class="cls-3" d="M106.79,502.23l.11.37,66-20c0-.12-.07-.24-.11-.36Z" />
        <path class="cls-3" d="M262.41,455.41l-.11-.37-66,20c0,.12.07.25.11.37Z" />
        <path class="cls-3" d="M121.67,530.23l.24.29,53.34-43.78-.24-.29Z" />
        <path class="cls-3" d="M247.53,427.41l-.24-.29L194,470.9l.24.3Z" />
        <path class="cls-3" d="M223.07,407.24l-.34-.18L190.2,467.93l.34.17Z" />
        <path class="cls-3" d="M146.13,550.4l.34.18L179,489.72l-.34-.18Z" />
        <path class="cls-3" d="M176.45,559.67l.38,0L183.59,491l-.38,0Z" />
        <path class="cls-3" d="M192.75,398l-.38,0-6.76,68.68.38,0Z" />
        <path class="cls-3" d="M117.14,433.52l-.21.32,57.38,38.33c.07-.1.13-.21.21-.32Z" />
        <path class="cls-3" d="M252.06,524.13l.21-.32-57.38-38.34-.21.32Z" />
        <path class="cls-3" d="M104.94,462.78l-.08.38,67.69,13.46c0-.13,0-.25.07-.38Z" />
        <path class="cls-3" d="M264.26,494.86l.07-.37L196.65,481c0,.13,0,.26-.07.38Z" />
        <path class="cls-3" d="M192.37,559.71l.38,0L186,491l-.38,0Z" />
        <path class="cls-3" d="M176.83,397.94l-.39,0,6.77,68.68.38,0Z" />
        <path class="cls-3" d="M146.46,407.07l-.33.18,32.52,60.85.34-.17Z" />
        <path class="cls-3" d="M222.74,550.57l.33-.17-32.53-60.86-.33.18Z" />
        <path class="cls-3" d="M121.91,427.12l-.25.3L175,471.2l.24-.3Z" />
        <path class="cls-3" d="M247.29,530.52l.24-.3-53.34-43.77-.24.29Z" />
        <path class="cls-3" d="M106.89,455.05l-.11.37,66,20c0-.12.07-.25.11-.37Z" />
        <path class="cls-3" d="M262.3,502.59l.11-.36-66-20c0,.13-.07.25-.11.37Z" />
        <path class="cls-3" d="M161.19,401l-.36.11,20,66,.37-.11Z" />
        <path class="cls-3" d="M208,556.64l.37-.11-20-66-.37.11Z" />
        <path class="cls-3" d="M133.2,415.89l-.3.24,43.78,53.34.3-.24Z" />
        <path class="cls-3" d="M236,541.76l.3-.24-43.78-53.35-.3.24Z" />
        <path class="cls-3" d="M256.17,517.29l.18-.33-60.86-32.53c-.06.11-.11.23-.17.34Z" />
        <path class="cls-3" d="M113,440.35l-.17.33,60.86,32.53c0-.11.11-.22.17-.33Z" />
        <path class="cls-3" d="M265.45,487l0-.38-68.68-6.77c0,.13,0,.26,0,.38Z" />
        <path class="cls-3" d="M103.75,470.67l0,.38,68.68,6.76,0-.38Z" />
      </g>
      <!--This is the path where the video is supposed to show-->
      <path class="cls-4" d="M362.2,177.6A177.59,177.59,0,0,0,184.51,0C86.18.05,7,81,7,179.3V479H131a7.22,7.22,0,0,0,5.64-2.71c7-8.75,30.15-35.76,48-35.76s40.93,27,48,35.76A7.21,7.21,0,0,0,238.2,479h124V177.61Z" />
      <path class="cls-3" d="M14,479a7,7,0,0,1-7-7,7,7,0,0,1-7,7,7,7,0,0,1,7,7,7,7,0,0,1,7-7" />
      <path class="cls-3" d="M369.2,479a7,7,0,0,1-7-7,7,7,0,0,1-7,7,7,7,0,0,1,7,7,7,7,0,0,1,7-7" />
    </g>
  </g>
</svg>
question from:https://stackoverflow.com/questions/65646094/svg-exchange-image-with-mp4-video-problems-with-clippath-video-not-showing

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...