@ForSureN1
frontend dev

Как вставить видео в SVG?

Добрый день, подскажите пожалуйста возможно ли реализовать svg blob со вставкой видео внутри, с картинкой получается, но вот с видео начинаются проблемы
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg">
            <defs>
                <clipPath id="shape">
                <path id="blob" fill="#00cec9">
                    <animate attributeName = "d"
                        dur="10000ms"
                        repeatCount="indefinite"
                        values="M458.5,305.5Q443,361,397,392.5Q351,424,300.5,454Q250,484,198,457.5Q146,431,95.5,400Q45,369,32.5,309.5Q20,250,43.5,197Q67,144,100.5,96.5Q134,49,192,42.5Q250,36,310.5,38Q371,40,405,90.5Q439,141,456.5,195.5Q474,250,458.5,305.5Z;
                        M459.00318,300.46824Q423.87931,350.93648,389.95554,392.5Q356.03176,434.06352,303.01588,452.99365Q250,471.92378,190.45236,464.04129Q130.90472,456.1588,96.00318,407.54764Q61.10163,358.93648,45.58258,304.46824Q30.06352,250,39.97777,191.96824Q49.89202,133.93648,97.98412,102.03494Q146.07622,70.13339,198.03811,36.96506Q250,3.79674,308.4873,25.4206Q366.97459,47.04446,398.96189,96.03494Q430.94918,145.02541,462.53811,197.5127Q494.12704,250,459.00318,300.46824Z;
                        M474.5249,308.26245Q451.16857,366.5249,407.46551,406.56944Q363.76245,446.61398,306.88122,462.21791Q250,477.82184,197.7773,454.78209Q145.55459,431.74235,93.57423,401.19301Q41.59388,370.64367,40.64847,310.32184Q39.70306,250,54.06944,197.33668Q68.43582,144.67337,108.18821,108.79214Q147.94061,72.91092,198.97031,42.33668Q250,11.76245,311.41092,24.52969Q372.82184,37.29694,416.46551,82.90087Q460.10918,128.5048,478.9952,189.2524Q497.88122,250,474.5249,308.26245Z;
                        M475.43781,308.5Q452,367,412.37812,414.44281Q372.75624,461.88562,311.37812,478.26124Q250,494.63686,198.43781,461.94281Q146.87562,429.24875,98.75375,397.05969Q50.63187,364.87063,44.44031,307.43531Q38.24875,250,56.68906,199.68906Q75.12937,149.37812,103.24625,96.74126Q131.36314,44.10439,190.68157,34.18157Q250,24.25874,311.06219,31.505Q372.12438,38.75125,415.24875,84.25125Q458.37313,129.75125,478.62438,189.87562Q498.87562,250,475.43781,308.5Z;
                        M475.5,308.5Q453,367,404.5,400.5Q356,434,303,457.5Q250,481,191.5,466.5Q133,452,83.5,413.5Q34,375,34,312.5Q34,250,47,195Q60,140,92.5,87Q125,34,187.5,30Q250,26,300.5,50.5Q351,75,402,104Q453,133,475.5,191.5Q498,250,475.5,308.5Z;
                        M458.5,305.5Q443,361,397,392.5Q351,424,300.5,454Q250,484,198,457.5Q146,431,95.5,400Q45,369,32.5,309.5Q20,250,43.5,197Q67,144,100.5,96.5Q134,49,192,42.5Q250,36,310.5,38Q371,40,405,90.5Q439,141,456.5,195.5Q474,250,458.5,305.5Z;">
                    </animate>
                </path>
                </clipPath>
            </defs>
            <foreignObject clip-path="shape">
                <video src="">
                    <source src="https://www.youtube.com/watch?v=P0bcD0nlLNk&ab_channel=LiveCanvas" />
                </video>
            </foreignObject>   
        </svg>
  • Вопрос задан
  • 146 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы