Svg with Radialgradient Not Work in Browsers

SVG with radialGradient not work in browsers

You can do this using mask and conic-gradient

.box {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border-radius: 50%;
  background: conic-gradient(#0000, red);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 calc(100% - 9px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 calc(100% - 9px));
}

body {
  background: url(https://picsum.photos/id/100/1000/1000) center/cover;
}

<div class="box">

</div>

Why is my SVG's radialGradient NOT showing in Chrome based browsers, but does in Firefox?

Instead of display:none, you can hide the first SVG with width="0" height="0". Then it works in Chrome:

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <defs>
        <symbol id="ellipsesymbol" viewBox="0 0 126 76">
            <radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(62.5,0,0,37.5,62.5069,37.5066)">
                <stop offset="0" style="stop-color:#000;stop-opacity:0.5"/>
                <stop offset="0.62" style="stop-color:#170725;stop-opacity:0.58"/>
                <stop offset="0.82" style="stop-color:#4e187f;stop-opacity:0.78"/>
                <stop offset="1" style="stop-color:#8a2be2;stop-opacity:1"/>
            </radialGradient>
            <ellipse cx="62.5" cy="37.839" rx="62.5" ry="37.5" style="fill:url(#_Radial1);" />
        </symbol>

        <symbol id="emailsymbol" viewBox="0 0 126 76">
            <path d="M31.15,17.125l0,40.763l62.713,0l0,-40.763l-62.713,-0Zm36.687,24.928c-1.411,1.411 -3.292,2.195 -5.33,2.195c-2.038,0 -3.92,-0.784 -5.331,-2.195l-21.792,-21.792l54.089,-0l-21.636,21.792Zm-17.402,-4.546l-16.149,16.148l0,-32.297l16.149,16.149Zm1.097,1.097l4.547,4.547c1.724,1.724 4.076,2.665 6.428,2.665c2.508,0 4.703,-0.941 6.428,-2.665l4.547,-4.547l16.148,16.149l-54.246,-0l16.148,-16.149Zm23.047,-1.097l16.149,-16.149l-0,32.454l-16.149,-16.305Z"
                  style="fill:#00bfff;fill-rule:nonzero;"/>
        </symbol>

        <symbol id="SMSsymbol" viewBox="0 0 126 76">
            <path d="M98.587,27.064c0,-4.29 -3.483,-7.773 -7.773,-7.773l-56.464,0c-4.29,0 -7.773,3.483 -7.773,7.773l0,15.546c0,4.29 3.483,7.773 7.773,7.773l15.631,0l-9.002,13.326l19.803,-13.326l30.032,0c4.29,0 7.773,-3.483 7.773,-7.773l0,-15.546Z"
                  style="fill:#00bfff;"/>
            <text x="36.276px" y="42.521px" style="font-family:'KnightsTemplar', 'Knights Templar';font-size:25.665px;">SMS</text>
        </symbol>
    </defs>
</svg>

<svg id="emailgroup">
    <use href="#ellipsesymbol" />
    <use href="#emailsymbol" />
</svg>

<svg id="smsgroup">
    <use href="#ellipsesymbol" />
    <use href="#SMSsymbol" />
</svg>

svg transparent radial gradient in safari not working

In your gradient's definition, alter the opacity for the stop points. So,instead of shifting the color from a given value to transparency, you would alter the transparency itself. The result seems to mimick the firefox behavior accurately.

Leaving the stop-color attributes in the code does not harm the displayed result. However, the duplicate computation is pointless, and given that bitmapping a gradient is relatively costly iirc, better drop it.

See here for a demo: http://codepen.io/anon/pen/aOQreP

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <radialGradient r="50%" cy="50%" cx="50%" id="myRadialGradient2">
            <stop stop-opacity="0" offset="0"></stop>
            <stop stop-opacity="1" offset="1"></stop>
        </radialGradient>
    </defs>

    <rect x="10" y="10" width="100" height="100" rx="10" ry="10" style="fill:blue;"/>
    <rect x="10" y="10" width="100" height="100" rx="10" ry="10" style="fill:url(#myRadialGradient2); stroke: #005000; stroke-width: 3;"/>

</svg>

These modifications shouldn't affect the rendering on other platforms.

Tested on Safari 5.1.7 (7534.57.2) on Windows.

radial-gradient not working in firefox

I think it's Mozilla bug. It doesn't support defined size radial gradient.

SEE

SVG being hidden by gradient overlay in IE only, works fine in Chrome

No, the radial-gradient is not hiding the SVG background but rather it is making the UA ignore the background property setting on the whole. The reason this is happening is because the radial gradient syntax is wrong. This problem would be seen in all non WebKit browsers. The reason why Chrome is able to display it correctly is because the -webkit-radial-gradient has a proper syntax.

The above statement can be verified by inspecting the element in IE. The background property would have a zigzag red colored underline (like in MS Word when there is a spelling mistake). This indicates that the property value is incorrect.

Once the radial-gradient syntax is corrected to be inline with the W3C Spec, it works as expected in all browsers. Tested in IE10+ (including Edge), Firefox, Chrome and Opera.

.pin1 {

  background: radial-gradient(ellipse at top center, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%), url('http://www.cafenocturne.com/images/svg/CafeLogoCircleSVG.svg');

  background-size: 40px 40px;

  background-position: -2px -2px;

  border-radius: 50%;

  width: 30px;

  height: 30px;

  box-shadow: 0 3px 6px rgba(0, 0, 0, .55);

  margin: 0 auto -20px auto;

}

.pin2 {

  background: url('http://www.cafenocturne.com/images/svg/CafeLogoCircleSVG.svg');

  background-size: 40px 40px;

  background-position: -2px -2px;

  border-radius: 50%;

  width: 30px;

  height: 30px;

  box-shadow: 0 3px 6px rgba(0, 0, 0, .55);

  margin: 0 auto -20px auto;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="pin1"></div>

<br>

<br>

<div class="pin2"></div>

SVG linearGradient not showing on path (multiple browser)

Sorry, nevermind I had an CSS defintion for all path elements.

Once I removed that everything worked fine.

SVG Linear gradient doesn't work in Safari

Your gradient will work in Safari if you wrap a defs tag around it:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
 <defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.6665" y1="149.5" x2="293.333" y2="149.5">
    <stop  offset="0" style="stop-color:#FFF33B"/>
    <stop  offset="0.0595" style="stop-color:#FFE029"/>
    <stop  offset="0.1303" style="stop-color:#FFD218"/>
    <stop  offset="0.2032" style="stop-color:#FEC90F"/>
    <stop  offset="0.2809" style="stop-color:#FDC70C"/>
    <stop  offset="0.6685" style="stop-color:#F3903F"/>
    <stop  offset="0.8876" style="stop-color:#ED683C"/>
    <stop  offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
</defs>
<rect x="5.667" y="5.333" fill="url(#SVGID_1_)" width="287.667" height="288.333"/>
</svg>

​It seems that wrapping your references in defs is encouraged but not obligatory according to spec. So this is a bug in Safari.

---

Related Topics