4

I created an SVG with an opacity gradient in Inkscape. In the file I see it made a <mask> with a radialGradient and a linearGradient inside <defs>. It then uses it as follows.

<g mask="url(#mask3597)">
   <path d=""/>
</g>

The masked path displays fine in Inkscape and Inkscape viewer, but does not appear at all in major browsers.

enter image description here

What is the unsupported feature, and is there a way to do this that will show up in browsers?

Update

Here is the SVG

The gradient mask is the only way I knew how to make the transperancy gradient. I am new to Inkscape. If someone could link a tutorial for a better method it would be much appreciated.

Update 2

I managed to do what I think joojaa was suggesting and it worked, thanks! I still have slight jaggies (conflation?) so if someone could describe exactly how to get the correct kind of overlap to fix that it would still be appreciated.

7
  • 2
    You should let your elements overlap, you have got a very nasty conflation going. You can never rely on all functionality working in all rendering engines. But to be honest there is too little info here to answer.
    – joojaa
    Oct 21 '21 at 5:51
  • 1
    Anyway you can certainly circumvent this without masks too, all you dmreally need is to copy object and put another gradient with transparent colorstops on the other.
    – joojaa
    Oct 21 '21 at 6:01
  • 2
    All of these should render in a browser. Might be something to do with the construction. Can you share the whole SVG at SVGshare.com? I agree with @joojaa there's no need to use a mask for this. Overlapping shapes would do the trick.
    – Billy Kerr
    Oct 21 '21 at 8:21
  • @joojaa #1 Overlap just by increasing the size of the gradient part? Just tried, but I don't know the best way and it did not fix all jaggies. What more info do you need?
    – dlsso
    Oct 21 '21 at 15:00
  • 1
    @disso There is a difference between the order of interpretation of the mask location in the SVG. It looks like the browser applies the mask without adjusting it to the transformed group, while Inkscape seems to apply the mask to the group, and only then applies the transformation. I don't know which one is correct and would ask you to open a bug report for Inkscape to let developers figure this out at inkscape.org/report .
    – Moini
    Oct 23 '21 at 19:04
3

To avoid the conflation problem, I'd construct it as follows. Also a construction like this is simple, and should avoid any browser rendering issues, or the need for a mask.

  1. With the Bézier tool, draw a rough shape over the area you wish to fill with the gradient, making sure it overlaps the black areas, and apply the gradient to it.

  2. Reduce the object opacity to something like 80%, or alternatively add some alpha transparency to the gradient stops themselves.

  3. Make sure the shape is selected and send to the bottom of the stack by pressing End

Example

enter image description here

1
  • Perfect, thanks. I learned a lot!
    – dlsso
    Oct 21 '21 at 19:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.