0

I have been developing a web page "game" on my PC based in HTML, SVG, and Javascript. It has a large image of the earth loaded into the SVG views through the SVG <image> tag. Testing on my PC this works with no problem, however recently I published it to a public web page (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: enter image description here

At first, I thought that it was just the image in the SVG viewports, but then I realized that the entire SVG viewport was black except for the lower-right quadrant. The SVG viewport is correctly fully sized, it just appears as if there is some black mask over 3/4s of it (or only 1/4 of it renders).

Here's what I think are the relevant HTML code lines, the containing Div tag for the first SVG view (line 67):

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

The SVG tag (line 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 %)  -->

And the embedded Image tag (starting at line 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>

The second SVG view is a shadowed (<use..> tag), zoomed view of the first with the same problem.

I have tested this on my PC, on both screens in Chrome, Edge, and IE, where it works correctly on all of them. I have also tested this on my iPhone with both Safari and Edge and my iPad with Safari, Chrome, and Edge with the same failure on all of them. I have tried just a bare <img> tag of the PNG file outside of SVG and that works fine on these platforms.

I do not have any Android platforms to test with, so if anyone wants to try it and let me know, I can add those results here.

I have researched this, and though there's a bunch of stuff about iOS not rendering images, mostly those are a complete failure to render, rather than this very specific partial rendering, and much less specific stuff about SVG differences. Ultimately I didn't find anything that seemed to be the same problem.

To summarize then, my question is: what is causing this problem or what have I done wrong, and how can I fix it? (I do understand that I will need to have a different style/CSS layout for mobile, but I still need to know what needs to be changed to make this render correctly)

RBarryYoung
  • 55,398
  • 14
  • 96
  • 137
  • 1
    At your Page, line 114 and 301 ``. What does this particular line do. If i delete following `` it's rendering. And there is no problem with your `` tag. – Fussionweb Aug 01 '20 at 11:58
  • Works perfectly on android. Seems to be Safari issue –  Aug 01 '20 at 15:54
  • @Fussionweb That is a clipPath to prevent elements of the SVG viewport that are outside of the viewbox from showing on the web page. One of the browsers that I tested on Windows was doing this. That is, there were large elements that were partially outside of the viewport, so they should have been implicitly clipped, but they weren't. So I added this clipPath to explicitly clip all elements to only be visible within the viewport. – RBarryYoung Aug 01 '20 at 17:12
  • Just get into the Developer tool, and check the clip-path is out of your Content. Your clip-path too working fine, it just showing the Content on its path, Just try to fix the x and y for the clip. – Fussionweb Aug 01 '20 at 18:01
  • Check this link might help you [clipPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath). it doesn't have an issue in Safari – Fussionweb Aug 01 '20 at 18:05

2 Answers2

1

Add X and Y coordinates for your <rect />. In your case, your Clip-Path Rectangle is not in an exact coordinate.

Here is the code working for me


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

replace this code with your <clipPath> on line 114 and 301.

Here is the Screenshot enter image description here

Moreover here is a live demo that worked on my Mac Safari as well in windows Chrome, where I took one part of your code.

Edit nervous-sanderson-qxnin

Fussionweb
  • 280
  • 5
  • 13
0

Update

Check the answer by @fussionweb.

Orignal answer:
You can try the -webkit- prefix before clip-path. It seems to be a safari issue related to clip-path.

  • https://stackoverflow.com/questions/41860477/why-doesnt-css-clip-path-with-svg-work-in-safari is specifically dealing with this issue. –  Aug 01 '20 at 16:02
  • @it happens with both Chrome and Edge on iOS also. But I will try this. – RBarryYoung Aug 01 '20 at 17:14
  • Hmm, my webpage is using SVG attribute to clip SVG, but the link you provided is using CSS, and I think that "-webkit-" is specifically CSS isn't it? Does an `-webkit-clip-path` attribute even exist? – RBarryYoung Aug 01 '20 at 17:22
  • Huh, I just noticed that the Mozilla doc on the clip-path attribute has ***no*** compatibility information filled in. That seems pretty odd, don't know if I ever saw that before. (I also didn't realize that I had to explicitly check the compatibility of every single tag attribute that I am using >:(. – RBarryYoung Aug 01 '20 at 17:30