Html SVG<；图像>；标记仅在iPhone上部分呈现

我一直在我的PC上开发一个基于HTML、SVG和Javascript的网页“游戏”。它通过SVG标记将地球的大图像加载到SVG视图中。在我的PC上测试这一点没有问题，但是最近我将其发布到了一个公共网页（）上，发现在我的iPhone和iPad上，只有SVG的右下四分之一在SVG视图上呈现。像这样：

起初，我以为它只是SVG视口中的图像，但后来我意识到，除了右下象限之外，整个SVG视口都是黑色的。SVG视口的大小完全正确，它的3/4（或仅渲染1/4）上似乎有一些黑色遮罩

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

SVG标记（第104行）：

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

第二个SVG视图是具有相同问题的第一个SVG视图的阴影（标记）缩放视图

我已经在我的电脑上测试过了，在Chrome、Edge和IE的两个屏幕上都能正常工作。我还用Safari和Edge在我的iPhone上进行了测试，用Safari、Chrome和Edge在我的iPad上进行了测试，但都出现了相同的故障。我尝试了SVG之外的PNG文件的一个简单标签，在这些平台上效果很好

我没有任何Android平台可供测试，所以如果有人想尝试并让我知道，我可以在这里添加这些结果

我已经对此进行了研究，虽然有很多关于iOS不渲染图像的东西，但大多数都是完全无法渲染的，而不是非常具体的部分渲染，以及关于SVG差异的更不具体的东西。最终，我没有发现任何类似的问题

总而言之，我的问题是：是什么导致了这个问题，或者我做错了什么，我该如何修复它？（我知道我需要为mobile使用不同的样式/CSS布局，但我仍然需要知道需要更改哪些内容才能正确渲染）

Update 通过@fusionweb检查答案

原始答案：

---

您可以在

剪辑路径之前尝试
-webkit-
前缀。这似乎是与剪辑路径有关的safari问题。
为您的
添加X和Y坐标。在本例中，剪辑路径矩形不在精确坐标中

这是为我工作的代码



将此代码替换为第114行和第301行的

这是截图

此外，这里还有一个在我的Mac Safari上以及在windows Chrome上运行的实时演示，我在其中使用了您的一部分代码

在您的页面，第114行和第301行
。这一行是做什么的。如果我删除下面的
，它将被渲染。而且你的
标签没有问题。在安卓系统上运行非常好。好像是在旅行issue@Fussionweb这是一个clipPath，用于防止viewbox之外的SVG视口元素显示在网页上。我在Windows上测试的浏览器之一就是这样做的。也就是说，有一些较大的元素部分位于视口之外，因此它们应该被隐式剪裁，但事实并非如此。因此，我添加了这个clipPath来显式地剪辑所有元素，使其仅在视口中可见。只需进入开发人员工具，检查剪辑路径是否超出您的内容。你的剪辑路径工作得太好了，它只是在其路径上显示内容，只是尝试修复剪辑的x和y。检查此链接可能会对你有所帮助。Safari专门处理这个问题，它在Safari中没有问题。@在iOS上，Chrome和Edge也会出现这种情况。但是我会试试这个。嗯，我的网页使用SVG属性来剪辑SVG，但是你提供的链接使用的是CSS，我认为“-webkit-”就是CSS，不是吗？是否存在
-webkit clip path
属性？嗯，我刚刚注意到clip path属性上的Mozilla文档没有填写兼容性信息。这似乎很奇怪，不知道我以前是否见过。（我也没有意识到我必须明确检查我正在使用的每个标记属性的兼容性>：（.我真的应该在X和Y属性上使用“px”吗？/元素中的任何东西的比例不只是viewbox坐标系，因此是无单位的吗？是的，就是这样！仅供参考，没有“px”它也可以工作。Thx
<div id="divSvg1" 
    style="position:relative; z-index:1; margin:15px; 
        top:100px; 
        width:640px; height:640px; 
        background-color:black;
        float:left;"
    >

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

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