css - SVG foreignObject 图像在 Safari 上不起作用

Question

我正在使用 svg:foreignObject 在悬停时创建格式化图像。以下策略在 Chrome 中完美运行，但foreignObject 在 Safari 中不可见。我就是看不到！我错过了什么？

代码如下 -

<svg style="margin-top:18.5vw" version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 1920 1299" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
                    <foreignObject width="465" height="465" x="308" y="33">
                    <video loop="" muted="" poster="1.jpg">
                        <source src="1.mp4" type="video/ogg">
                        <source src="src/uploads/&lt;p&gt;The filetype you are attempting to upload is not allowed.&lt;/p&gt;" type="video/mp4">
                    </video>
                </foreignObject>
                    <foreignObject width="465" height="465" x="785" y="0">
                    <video loop="" muted="" poster="src/assets/uploads/gallery_image_1580238733_10_1.jpg">
                        <source src="src/assets/uploads/460ef464541741014b1620c73c2fa2d7.mp4" type="video/ogg">
                        <source src="src/assets/uploads/&lt;p&gt;The filetype you are attempting to upload is not allowed.&lt;/p&gt;" type="video/mp4">
                    </video>
                </foreignObject>


</svg>

任何建议都非常感谢。

Answer 1

您应该将字符编码为十六进制，但我现在不知道原因！

function encodeSVG(svg) {
  return svg.replace(/[\x00-\xff]/g, i => {
    return `&#${i.charCodeAt()};`
  })
}