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

Question

我一直在基于 HTML、SVG 和 Javascript 在我的 PC 上开发网页“游戏”。它通过 SVG 标签将地球的大图像加载到 SVG 视图中。在我的电脑上测试这没有问题，但是最近我将它发布到 public 网页（http://rbarryyoung.com/EarthOrbitalSimulator.html) and discovered that only the bottom right quarter of the SVG is rendering on both SVG views on my iPhone and iPad. Like this:

起初，我以为它只是 SVG 视口中的图像，但后来我意识到整个 SVG 视口除了右下象限外都是黑色的。 SVG 视口的大小正确，看起来好像有超过 3/4 的黑色遮罩（或只有 1/4 呈现）。

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

<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 %)  -->

以及嵌入的图像标签（从第 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 差异。最终我没有找到任何似乎是相同问题的东西。

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

Answer 1

更新

查看@fussionweb 的回答。

原回答：
您可以在 clip-path 之前尝试使用 -webkit- 前缀。这似乎是与 clip-path 有关的 safari 问题。

Answer 2

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

这是适合我的代码


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

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

这是截图

此外，这是一个在我的 Mac Safari 以及 windows Chrome 中运行的现场演示，我在那里使用了您的代码的一部分。

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

SVG <Image> tag only partially rendering on iPhone

html

svg

rendering

ios

更新