用视频背景填充svg徽标字母

时间:2019-08-05 13:36:14

标签: html svg video

我已经使用这种方式(您可以看到codepen)在徽标字母中显示图像背景。现在,我要显示视频而不是图像。

https://codepen.io/irawachaloco/pen/GJKLzy

<svg class='crop-shapes'>

    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="650">
            <image class='twombly' xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
                width="380" height="267" />
        </pattern>

    </defs>

  <circle class='circ' cx="50" cy="50" r="50" fill="url(#img1)" filter="url(#sparklin)" onmouseover="evt.target.setAttribute('opacity', '0.5');"
13
onmouseout="evt.target.setAttribute('opacity','1)');"/>

  <rect x="110" y="0" width="100" height="100" stroke="black" fill="url(#img1)" filter="url(#sparklin)"/>

  <polygon x="10" points="270,0  220,100 320,100" fill="url(#img1)" filter="url(#sparklin)"/>

</svg>

有什么想法或例子吗?我是svg练习的菜鸟。 非常感谢!

0 个答案:

没有答案