SVG foreignObject图像在Safari上无法使用。

Question

我正在使用svg:foreignObject在悬停时创建一个格式化的图像。下面的策略在Chrome浏览器中可以完美地工作，但是在Safari中看不到foreignObject。我就是看不到它！我错过了什么？ 我缺少了什么？

代码如下

<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()};`
  })
}