I am trying to make a spherical image of a planet with a night side in shadow, to be rendered in browsers for a simulation web page, but I have been fighting a strange visual problem that I cannot seem to figure out.
Here is an image snip of the SVG as it is displayed in Chrome (this happens in IE also) and then zoomed up 3x:
You will notice that just above the day/night terminator, there is a faint darker horizontal band, about 1/3rd as wide as its distance above the terminator. That should not be there and I cannot figure why it is there or how to get rid of it.
Here is the SVG code in an HTML Snippet for easy viewing:
<div style="position:absolute; z-index:1; margin:15px;
width:640px; height:640px;
background-color:black">
<svg id="svgEa" style="width:100%; height:100%;" viewBox="-5000 -5000 10000 10000" 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 %) -->
<defs id="defsEa">
<clipPath id="svgEaClip">
<rect width="100%" height="100%" />
</clipPath>
<linearGradient id="lgdEaSphere">
<stop style="stop-color:#ffffff;stop-opacity:1.00;" offset="0.00" id="stopEarthCenter" />
<stop style="stop-color:#dfffef;stop-opacity:1.00" offset="0.30" id="stopEarthInner" />
<stop style="stop-color:#91ffc8;stop-opacity:1.00" offset="0.31" id="stopEarthMid" />
<stop style="stop-color:#00A064;stop-opacity:1.00" offset="0.95264" id="stopEarthOuter" />
<stop style="stop-color:#44ffff;stop-opacity:0.66" offset="0.95264" id="stopAirInner" />
<stop style="stop-color:#44ffff;stop-opacity:0.10" offset="1.00" id="stopAirOuter" />
</linearGradient>
<radialGradient id="rgdEaSphere" xlink:href="#lgdEaSphere"
gradientUnits="userSpaceOnUse"
cx="0" cy="0"
fx="0" fy="0"
r="3339.05"
/>
<linearGradient id="lgdEaNightSide"
x1="0%" y1="0%" x2="0%" y2="100%"
spreadMethod="pad" >
<stop style="stop-color:#000000;stop-opacity:0.7;" offset="0.00" id="stopEaMidnight" />
<!-- this stop seems to cause the artifact -->
<stop style="stop-color:#000000;stop-opacity:0.6;" offset="0.99" id="stopEaDusk" />
<stop style="stop-color:#000000;stop-opacity:0.5;" offset="1.00" id="stopEaTerminator" />
</linearGradient>
</defs>
<g id="gEaAll" transform="scale(1.2,1.2)" >
<g id="gEaSunFacing" >
<!-- contains everything that stays oriented with the Sun -->
<circle
id="cEarthAir"
cx="0" cy="0" r="3339.05"
style="display:inline;fill-opacity:1;fill:url(#rgdEaSphere)" />
<!-- overlay to give Earth a night side. -->
<path id="pNight"
style="stroke:none; fill:url(#lgdEaNightSide)"
d="M -3189.05,0
A 3189.05,15945.25 0 1,1 3189.05,0
Z"
/>
</g>
</g>
</svg>
</div>(If you want you can save this to an HTML (.html) file (add the html and body tags) and then run it in your browser to see it. Or save it to an SVG file (.svg), and remove the div and br tags, if you want to use any SVG tools on it.
This artifact is occurring right at where one of the linear gradient stops are, specifically #stopEaDusk at line 33, in the linear gradient #lgdEaNightSide, which is being used as the fill for the overlay path #pNight. This artifact may seem very faint, but it is real and more pronounced when not zoomed out by 300%. My actual SVG also has a complimentary #pDay overlay that I removed to simplify the code. But when it is added, I get three of these darkness-band artifacts, the one above, one at the corresponding spot on the other side (where I have another dawn/dusk stop) and one right at the midpoint where the two overlays meet. When they are all three visible, it looks horrible, so I cannot just ignore it.
Other points:
- As far as I can tell, this is not just a visual illusion as suggested here, as it persists even when blown up. And if it is, I still need to fix it.
- I do not believe that it is this old Chrome bug as suggested in this answer, because it appears differently, but mostly because I see it in IE also (though it might be fainter).
tl,dr: What is causing this darkness band and how can I get rid of it?
There seems to be some confusion about what the question is here, so allow me to clarify. The linear gradient lgdEaNightSide was written for an explicit effect, which it seems to be doing, but it is also producing an undesirable side-effect which is not intended, and to the best of my understanding of SVg should NOT be happening.
The desired effect is that the pNight overlay adds: 1. 70% darkness, at the top of its arc (which is very high and off-screen), shading smoothly to 60% darkness 99% of the way down. 2. Then shading quickly from 60% darkness 99% of the way down, to 50% darkness 100% of the way down. This is to provide a dusk-like transition area.
However, in addition to that, it is also adding the undesired effect: - at about 98.8% of the way down, it gets suddenly darker - then at about 99.2% of the way down, it gets suddenly lighter again.
This should not be happening, and as far as I know, the SVG I wrote should not be doing this.
What I am looking for is how to keep the first (desired) effect, while getting rid of the second (undesired) effect.
I do not need to be told that the second stop is causing the problem. I know that, I stated it above and I pointed it out in the code comments. I do not need an answer to tell me what I already know. What I am looking for is:
how to fix it while retaining the visual effect that I originally wrote it for, and
Why is it happening, when AFAIK, it should not be happening.
