Behavior of stop-opacity in radialGradient in SVG












2














Background



In the SVG2 spec we can read that:




The opacity value used for the gradient calculation is the product of
the value of stop-opacity and the opacity of the value of stop-color.
For stop-color value types of that don't include explicit opacity
information, the opacity of that component must be treated as 1.




Question



Why does setting stop-opacity: 0 on a 100% gradient stop (for example), not make that gradient stop completely transparent?



You can see the green in the code below.



Pointers to text in the spec that explains this behavior, would be appreciated.



Code






<svg height="150" width="200">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:0" />
</radialGradient>
</defs>
<ellipse cx="100" cy="75" rx="100" ry="75" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>





EDIT 1



I was using Chrome for these tests. The opacity does work as expected in Firefox.



EDIT 2



Removed fx fy to demonstrate that problem still remains, even without those.










share|improve this question
























  • what browsers? SVG2 seems to be good only on chrome I guess. (I don't see the same on FF btw)
    – Temani Afif
    Nov 22 at 12:40












  • Very interesting @TemaniAfif . In Firefox it displays as expected. Huh... Is SVG not widely supported yet?
    – Magnus
    Nov 22 at 12:50










  • SVG2 not yet as per my knowledge (not all the features)... also the Spec you are reading is a working Draft.
    – Temani Afif
    Nov 22 at 12:53












  • @TemaniAfif This is a bit confusing to me. Is there no support to display SVGs with gradients? What if I had made the image in Adobe Illustrator and it had radialGradient in it. If I added the image as an external SVG, would it still not work?
    – Magnus
    Nov 22 at 12:56












  • read this one and see:w3.org/TR/SVG11/pservers.html#RadialGradients .. it's probably a bug at the end. Anyway, wait for Robert or Paul, they will give you more precise details
    – Temani Afif
    Nov 22 at 12:56
















2














Background



In the SVG2 spec we can read that:




The opacity value used for the gradient calculation is the product of
the value of stop-opacity and the opacity of the value of stop-color.
For stop-color value types of that don't include explicit opacity
information, the opacity of that component must be treated as 1.




Question



Why does setting stop-opacity: 0 on a 100% gradient stop (for example), not make that gradient stop completely transparent?



You can see the green in the code below.



Pointers to text in the spec that explains this behavior, would be appreciated.



Code






<svg height="150" width="200">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:0" />
</radialGradient>
</defs>
<ellipse cx="100" cy="75" rx="100" ry="75" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>





EDIT 1



I was using Chrome for these tests. The opacity does work as expected in Firefox.



EDIT 2



Removed fx fy to demonstrate that problem still remains, even without those.










share|improve this question
























  • what browsers? SVG2 seems to be good only on chrome I guess. (I don't see the same on FF btw)
    – Temani Afif
    Nov 22 at 12:40












  • Very interesting @TemaniAfif . In Firefox it displays as expected. Huh... Is SVG not widely supported yet?
    – Magnus
    Nov 22 at 12:50










  • SVG2 not yet as per my knowledge (not all the features)... also the Spec you are reading is a working Draft.
    – Temani Afif
    Nov 22 at 12:53












  • @TemaniAfif This is a bit confusing to me. Is there no support to display SVGs with gradients? What if I had made the image in Adobe Illustrator and it had radialGradient in it. If I added the image as an external SVG, would it still not work?
    – Magnus
    Nov 22 at 12:56












  • read this one and see:w3.org/TR/SVG11/pservers.html#RadialGradients .. it's probably a bug at the end. Anyway, wait for Robert or Paul, they will give you more precise details
    – Temani Afif
    Nov 22 at 12:56














2












2








2







Background



In the SVG2 spec we can read that:




The opacity value used for the gradient calculation is the product of
the value of stop-opacity and the opacity of the value of stop-color.
For stop-color value types of that don't include explicit opacity
information, the opacity of that component must be treated as 1.




Question



Why does setting stop-opacity: 0 on a 100% gradient stop (for example), not make that gradient stop completely transparent?



You can see the green in the code below.



Pointers to text in the spec that explains this behavior, would be appreciated.



Code






<svg height="150" width="200">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:0" />
</radialGradient>
</defs>
<ellipse cx="100" cy="75" rx="100" ry="75" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>





EDIT 1



I was using Chrome for these tests. The opacity does work as expected in Firefox.



EDIT 2



Removed fx fy to demonstrate that problem still remains, even without those.










share|improve this question















Background



In the SVG2 spec we can read that:




The opacity value used for the gradient calculation is the product of
the value of stop-opacity and the opacity of the value of stop-color.
For stop-color value types of that don't include explicit opacity
information, the opacity of that component must be treated as 1.




Question



Why does setting stop-opacity: 0 on a 100% gradient stop (for example), not make that gradient stop completely transparent?



You can see the green in the code below.



Pointers to text in the spec that explains this behavior, would be appreciated.



Code






<svg height="150" width="200">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:0" />
</radialGradient>
</defs>
<ellipse cx="100" cy="75" rx="100" ry="75" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>





EDIT 1



I was using Chrome for these tests. The opacity does work as expected in Firefox.



EDIT 2



Removed fx fy to demonstrate that problem still remains, even without those.






<svg height="150" width="200">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:0" />
</radialGradient>
</defs>
<ellipse cx="100" cy="75" rx="100" ry="75" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>





<svg height="150" width="200">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:0" />
</radialGradient>
</defs>
<ellipse cx="100" cy="75" rx="100" ry="75" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>






html css svg






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 at 13:47

























asked Nov 22 at 12:34









Magnus

1,2121923




1,2121923












  • what browsers? SVG2 seems to be good only on chrome I guess. (I don't see the same on FF btw)
    – Temani Afif
    Nov 22 at 12:40












  • Very interesting @TemaniAfif . In Firefox it displays as expected. Huh... Is SVG not widely supported yet?
    – Magnus
    Nov 22 at 12:50










  • SVG2 not yet as per my knowledge (not all the features)... also the Spec you are reading is a working Draft.
    – Temani Afif
    Nov 22 at 12:53












  • @TemaniAfif This is a bit confusing to me. Is there no support to display SVGs with gradients? What if I had made the image in Adobe Illustrator and it had radialGradient in it. If I added the image as an external SVG, would it still not work?
    – Magnus
    Nov 22 at 12:56












  • read this one and see:w3.org/TR/SVG11/pservers.html#RadialGradients .. it's probably a bug at the end. Anyway, wait for Robert or Paul, they will give you more precise details
    – Temani Afif
    Nov 22 at 12:56


















  • what browsers? SVG2 seems to be good only on chrome I guess. (I don't see the same on FF btw)
    – Temani Afif
    Nov 22 at 12:40












  • Very interesting @TemaniAfif . In Firefox it displays as expected. Huh... Is SVG not widely supported yet?
    – Magnus
    Nov 22 at 12:50










  • SVG2 not yet as per my knowledge (not all the features)... also the Spec you are reading is a working Draft.
    – Temani Afif
    Nov 22 at 12:53












  • @TemaniAfif This is a bit confusing to me. Is there no support to display SVGs with gradients? What if I had made the image in Adobe Illustrator and it had radialGradient in it. If I added the image as an external SVG, would it still not work?
    – Magnus
    Nov 22 at 12:56












  • read this one and see:w3.org/TR/SVG11/pservers.html#RadialGradients .. it's probably a bug at the end. Anyway, wait for Robert or Paul, they will give you more precise details
    – Temani Afif
    Nov 22 at 12:56
















what browsers? SVG2 seems to be good only on chrome I guess. (I don't see the same on FF btw)
– Temani Afif
Nov 22 at 12:40






what browsers? SVG2 seems to be good only on chrome I guess. (I don't see the same on FF btw)
– Temani Afif
Nov 22 at 12:40














Very interesting @TemaniAfif . In Firefox it displays as expected. Huh... Is SVG not widely supported yet?
– Magnus
Nov 22 at 12:50




Very interesting @TemaniAfif . In Firefox it displays as expected. Huh... Is SVG not widely supported yet?
– Magnus
Nov 22 at 12:50












SVG2 not yet as per my knowledge (not all the features)... also the Spec you are reading is a working Draft.
– Temani Afif
Nov 22 at 12:53






SVG2 not yet as per my knowledge (not all the features)... also the Spec you are reading is a working Draft.
– Temani Afif
Nov 22 at 12:53














@TemaniAfif This is a bit confusing to me. Is there no support to display SVGs with gradients? What if I had made the image in Adobe Illustrator and it had radialGradient in it. If I added the image as an external SVG, would it still not work?
– Magnus
Nov 22 at 12:56






@TemaniAfif This is a bit confusing to me. Is there no support to display SVGs with gradients? What if I had made the image in Adobe Illustrator and it had radialGradient in it. If I added the image as an external SVG, would it still not work?
– Magnus
Nov 22 at 12:56














read this one and see:w3.org/TR/SVG11/pservers.html#RadialGradients .. it's probably a bug at the end. Anyway, wait for Robert or Paul, they will give you more precise details
– Temani Afif
Nov 22 at 12:56




read this one and see:w3.org/TR/SVG11/pservers.html#RadialGradients .. it's probably a bug at the end. Anyway, wait for Robert or Paul, they will give you more precise details
– Temani Afif
Nov 22 at 12:56












1 Answer
1






active

oldest

votes


















0














The SVG 1.1 spec doesn't say much on the subject of interpolating colors between stops. But all the renderers I have seen so far are in concordance with this SVG 2 spec statement:




For linear and radial gradients, the color value between two stops along the gradient vector is the linear interpolation, per channel, of the color for each stop, weighted by the distance from each stop.




It's not explicitely said that opacity is treated as a channel in this context, but again that is what renderers do: If there are two gradient stops with color1 and opacity=1 and color2 and opacity=0, then the color at an intermediate point is a linear interpolation between the color values, and the opacity is partial.



For your example color will change like this:




  • color stop at 0%: red 255, green 0, blue 0, opacity 1

  • color interpolation at 25%: red 192, green 64, blue 0, opacity 0.75

  • color interpolation at 50%: red 128, green 128, blue 0, opacity 0.5

  • color interpolation at 75%: red 64, green 192, blue 0, opacity 0.25

  • color stop at 100%: red 0, green 255, blue 0, opacity 0


As the color fades, it goes from red to green:



Radial gradient from opaque red to tranparent green



I can see this with almost all browsers I have access to: Chrome 70/Windows, Chromium 70/Debian, Firefox 60esr/Debian, Firefox 62/Debian, Edge, IE11. The only exeption is Firefox on Windows: v62/63 show a gradient going from opaque red to transparent red:



enter image description here



From my point of view, it is Firefox that is in error here.






share|improve this answer























  • Thank you cc. To me, it seems like that contradicts the spec paragraph I quoted above: "...opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color...". Since 0*anyThing is always 0, never 0.1, I have a hard time concluding as you did.
    – Magnus
    Nov 22 at 17:46












  • That is the value at the stop, but not the interpolated value between stops. The important thing to note is that transparent red (rgba(255, 0, 0, 0)) and transparent green (rgba(0, 255, 0, 0) are two different colors.
    – ccprog
    Nov 22 at 17:50












  • On my Mac Firefox I see the top image, not the bottom one.
    – Robert Longson
    Nov 22 at 19:39










  • I've submitted a bug report: bugzilla.mozilla.org/show_bug.cgi?id=1509396
    – ccprog
    Nov 22 at 21:40










  • Gentlemen, logically I find it odd that it should be transparent at the stop, but not between them. My guess is that Firefox has the right interpretation here. If you set 0 opacity, it does not seem right to move towards some other arbitrary (non-specified) opacity between two stops.
    – Magnus
    Nov 23 at 14:17











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431154%2fbehavior-of-stop-opacity-in-radialgradient-in-svg%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














The SVG 1.1 spec doesn't say much on the subject of interpolating colors between stops. But all the renderers I have seen so far are in concordance with this SVG 2 spec statement:




For linear and radial gradients, the color value between two stops along the gradient vector is the linear interpolation, per channel, of the color for each stop, weighted by the distance from each stop.




It's not explicitely said that opacity is treated as a channel in this context, but again that is what renderers do: If there are two gradient stops with color1 and opacity=1 and color2 and opacity=0, then the color at an intermediate point is a linear interpolation between the color values, and the opacity is partial.



For your example color will change like this:




  • color stop at 0%: red 255, green 0, blue 0, opacity 1

  • color interpolation at 25%: red 192, green 64, blue 0, opacity 0.75

  • color interpolation at 50%: red 128, green 128, blue 0, opacity 0.5

  • color interpolation at 75%: red 64, green 192, blue 0, opacity 0.25

  • color stop at 100%: red 0, green 255, blue 0, opacity 0


As the color fades, it goes from red to green:



Radial gradient from opaque red to tranparent green



I can see this with almost all browsers I have access to: Chrome 70/Windows, Chromium 70/Debian, Firefox 60esr/Debian, Firefox 62/Debian, Edge, IE11. The only exeption is Firefox on Windows: v62/63 show a gradient going from opaque red to transparent red:



enter image description here



From my point of view, it is Firefox that is in error here.






share|improve this answer























  • Thank you cc. To me, it seems like that contradicts the spec paragraph I quoted above: "...opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color...". Since 0*anyThing is always 0, never 0.1, I have a hard time concluding as you did.
    – Magnus
    Nov 22 at 17:46












  • That is the value at the stop, but not the interpolated value between stops. The important thing to note is that transparent red (rgba(255, 0, 0, 0)) and transparent green (rgba(0, 255, 0, 0) are two different colors.
    – ccprog
    Nov 22 at 17:50












  • On my Mac Firefox I see the top image, not the bottom one.
    – Robert Longson
    Nov 22 at 19:39










  • I've submitted a bug report: bugzilla.mozilla.org/show_bug.cgi?id=1509396
    – ccprog
    Nov 22 at 21:40










  • Gentlemen, logically I find it odd that it should be transparent at the stop, but not between them. My guess is that Firefox has the right interpretation here. If you set 0 opacity, it does not seem right to move towards some other arbitrary (non-specified) opacity between two stops.
    – Magnus
    Nov 23 at 14:17
















0














The SVG 1.1 spec doesn't say much on the subject of interpolating colors between stops. But all the renderers I have seen so far are in concordance with this SVG 2 spec statement:




For linear and radial gradients, the color value between two stops along the gradient vector is the linear interpolation, per channel, of the color for each stop, weighted by the distance from each stop.




It's not explicitely said that opacity is treated as a channel in this context, but again that is what renderers do: If there are two gradient stops with color1 and opacity=1 and color2 and opacity=0, then the color at an intermediate point is a linear interpolation between the color values, and the opacity is partial.



For your example color will change like this:




  • color stop at 0%: red 255, green 0, blue 0, opacity 1

  • color interpolation at 25%: red 192, green 64, blue 0, opacity 0.75

  • color interpolation at 50%: red 128, green 128, blue 0, opacity 0.5

  • color interpolation at 75%: red 64, green 192, blue 0, opacity 0.25

  • color stop at 100%: red 0, green 255, blue 0, opacity 0


As the color fades, it goes from red to green:



Radial gradient from opaque red to tranparent green



I can see this with almost all browsers I have access to: Chrome 70/Windows, Chromium 70/Debian, Firefox 60esr/Debian, Firefox 62/Debian, Edge, IE11. The only exeption is Firefox on Windows: v62/63 show a gradient going from opaque red to transparent red:



enter image description here



From my point of view, it is Firefox that is in error here.






share|improve this answer























  • Thank you cc. To me, it seems like that contradicts the spec paragraph I quoted above: "...opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color...". Since 0*anyThing is always 0, never 0.1, I have a hard time concluding as you did.
    – Magnus
    Nov 22 at 17:46












  • That is the value at the stop, but not the interpolated value between stops. The important thing to note is that transparent red (rgba(255, 0, 0, 0)) and transparent green (rgba(0, 255, 0, 0) are two different colors.
    – ccprog
    Nov 22 at 17:50












  • On my Mac Firefox I see the top image, not the bottom one.
    – Robert Longson
    Nov 22 at 19:39










  • I've submitted a bug report: bugzilla.mozilla.org/show_bug.cgi?id=1509396
    – ccprog
    Nov 22 at 21:40










  • Gentlemen, logically I find it odd that it should be transparent at the stop, but not between them. My guess is that Firefox has the right interpretation here. If you set 0 opacity, it does not seem right to move towards some other arbitrary (non-specified) opacity between two stops.
    – Magnus
    Nov 23 at 14:17














0












0








0






The SVG 1.1 spec doesn't say much on the subject of interpolating colors between stops. But all the renderers I have seen so far are in concordance with this SVG 2 spec statement:




For linear and radial gradients, the color value between two stops along the gradient vector is the linear interpolation, per channel, of the color for each stop, weighted by the distance from each stop.




It's not explicitely said that opacity is treated as a channel in this context, but again that is what renderers do: If there are two gradient stops with color1 and opacity=1 and color2 and opacity=0, then the color at an intermediate point is a linear interpolation between the color values, and the opacity is partial.



For your example color will change like this:




  • color stop at 0%: red 255, green 0, blue 0, opacity 1

  • color interpolation at 25%: red 192, green 64, blue 0, opacity 0.75

  • color interpolation at 50%: red 128, green 128, blue 0, opacity 0.5

  • color interpolation at 75%: red 64, green 192, blue 0, opacity 0.25

  • color stop at 100%: red 0, green 255, blue 0, opacity 0


As the color fades, it goes from red to green:



Radial gradient from opaque red to tranparent green



I can see this with almost all browsers I have access to: Chrome 70/Windows, Chromium 70/Debian, Firefox 60esr/Debian, Firefox 62/Debian, Edge, IE11. The only exeption is Firefox on Windows: v62/63 show a gradient going from opaque red to transparent red:



enter image description here



From my point of view, it is Firefox that is in error here.






share|improve this answer














The SVG 1.1 spec doesn't say much on the subject of interpolating colors between stops. But all the renderers I have seen so far are in concordance with this SVG 2 spec statement:




For linear and radial gradients, the color value between two stops along the gradient vector is the linear interpolation, per channel, of the color for each stop, weighted by the distance from each stop.




It's not explicitely said that opacity is treated as a channel in this context, but again that is what renderers do: If there are two gradient stops with color1 and opacity=1 and color2 and opacity=0, then the color at an intermediate point is a linear interpolation between the color values, and the opacity is partial.



For your example color will change like this:




  • color stop at 0%: red 255, green 0, blue 0, opacity 1

  • color interpolation at 25%: red 192, green 64, blue 0, opacity 0.75

  • color interpolation at 50%: red 128, green 128, blue 0, opacity 0.5

  • color interpolation at 75%: red 64, green 192, blue 0, opacity 0.25

  • color stop at 100%: red 0, green 255, blue 0, opacity 0


As the color fades, it goes from red to green:



Radial gradient from opaque red to tranparent green



I can see this with almost all browsers I have access to: Chrome 70/Windows, Chromium 70/Debian, Firefox 60esr/Debian, Firefox 62/Debian, Edge, IE11. The only exeption is Firefox on Windows: v62/63 show a gradient going from opaque red to transparent red:



enter image description here



From my point of view, it is Firefox that is in error here.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 22 at 18:03

























answered Nov 22 at 17:42









ccprog

8,71811027




8,71811027












  • Thank you cc. To me, it seems like that contradicts the spec paragraph I quoted above: "...opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color...". Since 0*anyThing is always 0, never 0.1, I have a hard time concluding as you did.
    – Magnus
    Nov 22 at 17:46












  • That is the value at the stop, but not the interpolated value between stops. The important thing to note is that transparent red (rgba(255, 0, 0, 0)) and transparent green (rgba(0, 255, 0, 0) are two different colors.
    – ccprog
    Nov 22 at 17:50












  • On my Mac Firefox I see the top image, not the bottom one.
    – Robert Longson
    Nov 22 at 19:39










  • I've submitted a bug report: bugzilla.mozilla.org/show_bug.cgi?id=1509396
    – ccprog
    Nov 22 at 21:40










  • Gentlemen, logically I find it odd that it should be transparent at the stop, but not between them. My guess is that Firefox has the right interpretation here. If you set 0 opacity, it does not seem right to move towards some other arbitrary (non-specified) opacity between two stops.
    – Magnus
    Nov 23 at 14:17


















  • Thank you cc. To me, it seems like that contradicts the spec paragraph I quoted above: "...opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color...". Since 0*anyThing is always 0, never 0.1, I have a hard time concluding as you did.
    – Magnus
    Nov 22 at 17:46












  • That is the value at the stop, but not the interpolated value between stops. The important thing to note is that transparent red (rgba(255, 0, 0, 0)) and transparent green (rgba(0, 255, 0, 0) are two different colors.
    – ccprog
    Nov 22 at 17:50












  • On my Mac Firefox I see the top image, not the bottom one.
    – Robert Longson
    Nov 22 at 19:39










  • I've submitted a bug report: bugzilla.mozilla.org/show_bug.cgi?id=1509396
    – ccprog
    Nov 22 at 21:40










  • Gentlemen, logically I find it odd that it should be transparent at the stop, but not between them. My guess is that Firefox has the right interpretation here. If you set 0 opacity, it does not seem right to move towards some other arbitrary (non-specified) opacity between two stops.
    – Magnus
    Nov 23 at 14:17
















Thank you cc. To me, it seems like that contradicts the spec paragraph I quoted above: "...opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color...". Since 0*anyThing is always 0, never 0.1, I have a hard time concluding as you did.
– Magnus
Nov 22 at 17:46






Thank you cc. To me, it seems like that contradicts the spec paragraph I quoted above: "...opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color...". Since 0*anyThing is always 0, never 0.1, I have a hard time concluding as you did.
– Magnus
Nov 22 at 17:46














That is the value at the stop, but not the interpolated value between stops. The important thing to note is that transparent red (rgba(255, 0, 0, 0)) and transparent green (rgba(0, 255, 0, 0) are two different colors.
– ccprog
Nov 22 at 17:50






That is the value at the stop, but not the interpolated value between stops. The important thing to note is that transparent red (rgba(255, 0, 0, 0)) and transparent green (rgba(0, 255, 0, 0) are two different colors.
– ccprog
Nov 22 at 17:50














On my Mac Firefox I see the top image, not the bottom one.
– Robert Longson
Nov 22 at 19:39




On my Mac Firefox I see the top image, not the bottom one.
– Robert Longson
Nov 22 at 19:39












I've submitted a bug report: bugzilla.mozilla.org/show_bug.cgi?id=1509396
– ccprog
Nov 22 at 21:40




I've submitted a bug report: bugzilla.mozilla.org/show_bug.cgi?id=1509396
– ccprog
Nov 22 at 21:40












Gentlemen, logically I find it odd that it should be transparent at the stop, but not between them. My guess is that Firefox has the right interpretation here. If you set 0 opacity, it does not seem right to move towards some other arbitrary (non-specified) opacity between two stops.
– Magnus
Nov 23 at 14:17




Gentlemen, logically I find it odd that it should be transparent at the stop, but not between them. My guess is that Firefox has the right interpretation here. If you set 0 opacity, it does not seem right to move towards some other arbitrary (non-specified) opacity between two stops.
– Magnus
Nov 23 at 14:17


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431154%2fbehavior-of-stop-opacity-in-radialgradient-in-svg%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Berounka

Sphinx de Gizeh

Different font size/position of beamer's navigation symbols template's content depending on regular/plain...