我试图将YouTube(iframe)放置在一个用SVG制作的自定义形状中。
<svg width="500" height="500" viewBox="0 0 500 500">
<clippath id="rect">
<rect x="0" y="0" width="500" height="500" rx="50" ry="50" />
</clippath>
<g clip-path="url(#rect)">
<foreignObject x="0" y="0" width="100%" height="100%">
<iframe id="player" type="text/html" width="500px" height="500px" src="https://www.youtube.com/embed/m1mncceY4-4?enablejsapi=1"></iframe>
</foreignObject></g></svg>
Another sample page that attempts same goal(请使用除iOS以外的任何浏览器查看)
问题是剪辑在iOS上的任何浏览器上都不起作用。如果你打开上面的示例,你会发现剪辑已经消失了。
任何建议赞赏。谢谢
2条答案
按热度按时间h43kikqp1#
将
<clippath>
Package 在<defs>
中是否有帮助?https://stackoverflow.com/a/14389784/708381
ulmd4ohb2#
解决方法:将剪辑路径应用到
<foreignObject>
中的HTML元素我们需要调整剪辑路径以响应HTML元素,如下所示:
我们需要添加
clipPathUnits="objectBoundingBox"
并将元素的大小缩放为1x 1单位。参见"Eric Meyer: Scaling SVG Clipping Paths for CSS Use"
iframe在SO片段中被阻止-请参见this codepen
<foreignObject>
元素可以引入quite a lot of cross-browser rendering issues.因此,如果你的svg主要包含封装在
<foreignObject>
中的HTML,你应该考虑使用HTML/CSS方法。