0

I cannot seem to properly apply a simple mask to a group of two ellipses (in order to make it slightly transparent) with Inkscape 0.92.4. The resulting image becomes completely transparent instead of slightly transparent.

What I did:

  1. created a new document.
  2. set Document properties; units to px, width x height to 16x16 px.
  3. zoomed in to view entire page.
  4. created first ellipse and set its fill to black.
  5. created second ellipse inside first and set its fill to white.
  6. grouped the two ellipses.
  7. created a rectangle covering the two ellipses and set its fill to a shade of gray.
  8. selected all (group and rectangle shown as selection).
  9. used "Object > Mask > Set".

At this point Inkscape shows (and exports) the image as desired, but other renderers do not. Firefox, Chrome and Gimp's SVG import display no visible image when opening the saved SVG file, which might be due to a bug in Inkscape. If it is, I'd like to work around it.

Can I achieve the desired effect in another way using Inkscape?

The resulting XML from steps above (drawing.svg), just in case:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="16"
   height="16"
   viewBox="0 0 4.2333332 4.2333335"
   version="1.1"
   id="svg3281"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
   sodipodi:docname="drawing.svg">
  <defs
     id="defs3275">
    <mask
       maskUnits="userSpaceOnUse"
       id="mask3841">
      <rect
         style="opacity:1;fill:#9b9b9b;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="rect3843"
         width="3.0297153"
         height="3.0592449"
         x="0.60239953"
         y="293.3974" />
    </mask>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="44.8"
     inkscape:cx="8.4637047"
     inkscape:cy="8.0165929"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:window-width="1337"
     inkscape:window-height="924"
     inkscape:window-x="2208"
     inkscape:window-y="288"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata3278">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="eye"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-292.76665)">
    <g
       id="g3837"
       mask="url(#mask3841)">
      <ellipse
         ry="1.2431873"
         rx="1.2668108"
         cy="294.87091"
         cx="2.1704102"
         id="path3829"
         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <ellipse
         ry="0.64374065"
         rx="0.65850544"
         cy="295.25183"
         cx="2.3712099"
         id="path3831"
         style="opacity:1;fill:#f3f3f3;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    </g>
  </g>
</svg>

  • Sometimes Inkscape has SVG functionality which is not supported in browsers yet. I'd suggest you try a different approach to keep it as simple as possible, such as reducing the opacity of the group instead. – Billy Kerr Apr 10 at 10:36
  • @BillyKerr, well, that worked. It did not occur to me to - just reduce opacity of the group. I just blindly did what I remembered from tutorials instead of doing the (now) obvious. Thank you. – predi Apr 10 at 10:50
  • Glad it worked for you. – Billy Kerr Apr 10 at 11:06
1

Sometimes Inkscape has SVG functionality which isn't supported in browsers yet. This isn't a bug in Inkscape, it's lack of support for certain SVG features in browsers: Typically these missing features include things such as filters and effects, and gradient meshes.

I'd suggest you try a different approach to keep it as simple as possible, such as reducing the opacity of the group instead. In the example below I released and deleted the mask you applied, then reduced the fill opacity of the group.

I tested this approach in Firefox and Chrome. Both work fine.

enter image description here

| improve this answer | |

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.