Behavior of stop-opacity in radialGradient in SVG
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.
html css svg
|
show 6 more comments
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.
html css svg
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
|
show 6 more comments
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.
html css svg
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
html css svg
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
|
show 6 more comments
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
|
show 6 more comments
1 Answer
1
active
oldest
votes
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:
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:
From my point of view, it is Firefox that is in error here.
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
|
show 1 more comment
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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:
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:
From my point of view, it is Firefox that is in error here.
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
|
show 1 more comment
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:
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:
From my point of view, it is Firefox that is in error here.
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
|
show 1 more comment
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:
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:
From my point of view, it is Firefox that is in error here.
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:
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:
From my point of view, it is Firefox that is in error here.
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
|
show 1 more comment
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
|
show 1 more comment
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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