1

While I am absolutely sure this is something I'm missing, I have a problem with SVG masks.

I have an SVG of a simple padlock icon (link to JSFiddle below) that worked fine before, but now the ellipse part of the keyhole is not working. I have the fill set to black in the mask.

I have tried a bunch of things, including changing the entire bottom part to a path (it didn't look right), changing the mask to a clip path (opposite of what I wanted) and even swapping the ellipse and the polygon. Nothing worked.

Here's a JSFiddle of the icon.

Code:

<svg viewBox="0 0 32 32" version="1.1" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="lock-mask">
            <rect x="0" y="0" width="32" height="32" fill="white" />
            <ellipse cx="16" cy="19" rx="3" ry="2" fill="black" />
            <polygon points="15,20 14,26 18,26 17,20" fill="black" />
        </mask>
    </defs>

    <rect x="2" y="13" width="28" height="16" rx="2" ry="2" mask="url(#lock-mask)" />
    <path d="M6.5 14 V 9 A 10 6 0 0 1 25.5 9 V 14 H 22.5 V 9 A 8 5 0 0 0 9.5 9 V 14 Z" />
</svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • I use Firefox 32. Probably _is_ a bug, it broke without changing anything. –  Sep 05 '14 at 18:59
  • It works again in Firefox trunk. Not sure when/what fixed it though. – Robert Longson Sep 05 '14 at 21:37
  • A lock with keyhole can be drawn without masks, thus avoiding the browser issue. – Alvin K. Sep 07 '14 at 05:45
  • Well, I know I can but I'm just too lazy to do it. –  Sep 08 '14 at 18:42
  • I'm having the same issue with my reflection mask here: http://stackoverflow.com/questions/21647389/implement-a-css-only-slideshow-carousel-with-next-and-previous-buttons nothing has changed so assuming it's a bug (FF 32)... especially considering if I switch to using circles instead it starts working. – Pebbl Sep 18 '14 at 07:59

0 Answers0