SVG <Image> 标签仅在 iPhone 上部分呈现

Question

我一直在我的 PC 上基于 HTML、SVG 和 Javascript 开发网页“游戏”。它通过 SVG 标签将地球的大图像加载到 SVG 视图中。在我的 PC 上进行测试没有问题，但是最近我将它发布到公共网页 (http://rbarryyoung.com/EarthOrbitalSimulator.html) 并发现只有 SVG 的右下角四分之一在我的 iPhone 和 iPad 上的 SVG 视图上呈现。像这样：

起初，我以为它只是 SVG 视口中的图像，但后来我意识到除了右下象限之外，整个 SVG 视口都是黑色的。 SVG 视口的大小正确无误，它看起来好像在它的 3/4 上（或只有 1/4 渲染）有一些黑色蒙版。

以下是我认为相关的 HTML 代码行，包含第一个 SVG 视图的 Div 标记（第 67 行）：

<div id="divSvg1" 
    style="position:relative; z-index:1; margin:15px; 
        top:100px; 
        width:640px; height:640px; 
        background-color:black;
        float:left;"
    >

SVG 标签（第 104 行）：

    <svg  id="svgEa" 
        style="width:100%; height:100%;"
        viewBox="-7500 -7500 15000 15000"
        preserveAspectRatio="xMidYMid meet"
        clip-path="url(#svgEaClip)"
        transform="scale(1.0,1.0)"
        version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- NOTE: All internal units are in KM (or %)  -->

以及嵌入的 Image 标签（从第 160 行开始）：

        <g id="gEaAll" transform="scale(1.0,1.0)" >

            <!-- ... -->

            <g id="gEaSurfaceFacingBottom" class="eaSurfaceFacing">
                <g id=gEarthImage>
                    <!-- ...  -->
                    <image x="-6413" y="-6413" width="12826" height="12826" href="eosImages/globe-arctic 8bit.png" />
                </g>
            </g>

第二个 SVG 视图是一个带阴影的（ 标签），第一个的缩放视图有同样的问题。

我已经在我的 PC 上测试了这个，在 Chrome、Edge 和 IE 的两个屏幕上都可以正常工作。我还在我的 iPhone 上用 Safari 和 Edge 测试过这个，我的 iPad 上用 Safari、Chrome 和 Edge 测试过，所有这些都失败了。我只尝试了 SVG 之外的 PNG 文件的裸 标记，并且在这些平台上运行良好。

我没有任何 Android 平台可供测试，所以如果有人想尝试并告诉我，我可以在此处添加这些结果。

我对此进行了研究，虽然有很多关于 iOS 不渲染图像的东西，但大多数是完全无法渲染，而不是这个非常具体的部分渲染，更不用说关于 SVG 差异的具体内容。最终我没有发现任何似乎是相同问题的东西。

总结一下，我的问题是：是什么导致了这个问题或者我做错了什么，我该如何解决？ （我确实知道我需要为移动设备设置不同的样式/CSS 布局，但我仍然需要知道需要更改哪些内容才能正确渲染）

Answer 1

为您的<rect /> 添加 X 和 Y 坐标。在您的情况下，您的 Clip-Path Rectangle 不在精确坐标中。

这是为我工作的代码

    <clipPath>
         <rect x="-7500px" y="-7500px" width="100%" height="100%" />
    <cliPath>

在第 114 和 301 行用您的 <clipPath> 替换此代码。

这是截图

此外，这里还有一个现场演示，它在我的 Mac Safari 以及 Windows Chrome 中都可以使用，我在其中获取了您的一部分代码。

Answer 2

更新

查看@fussionweb 的答案。

原答案：
您可以在clip-path 之前尝试-webkit- 前缀。这似乎是与剪辑路径相关的 Safari 问题。