Added 2 images to show the difference:

• Chrome renders the svg correctly with the bottom bar
• Firefox leaves out the bottom bar

Its not nested http://dev.w3.org/SVG/modules/rendero.../SVGRenderOrder.html# so that is odd.

• In your debugging information are there any elements that have the value hidden or display none?
• If you change the order of the "polyline stroke="black"" does this render the object?
• see if you can off set the last stroke by .01 and see if it renders: http://stackoverflow.com/questions/42.../svg-polyline-with-stroke-linejoinround-not-showing-a-rounded-corner
• if you take out the url(#circles) it displays, but the white edges are not there. Is there something over lapping this?

https://developer.mozilla.org/en-US/d.../Fills_and_Strokes

Did this help?

Thanks for your reply,

I tried switching the order of the polyline, but it is always the polyline that is visually at the bottom that doesnt get rendered.

Raising or lowering the last polyline by .01 doesn't make a difference, neither does raising or lowering by 100 pixels. When I raise only the left side it shows a horizontal line of 1 pixel high (see FireFox2.png). If I lower the left side by 40 pixels and raise the right side by 40 pixels it looks almost right (FireFox3.png). But that doesnt make sense to me.

The way I understand masks it shouldn't require me to change the picture I'm masking. I create a square mask (white) with 4 holes cut out (black) and use it to overlay the 3 bars, so everything except the 4 holes should be kept.

I guess there is some error in the function that overlays the mask with the picture, but its not any error I can think off.

Another weird thing is that Internet Explorer has the exact same issue.

It seems I was wrong about Chrome being correct.. when I move the left side down 1 pixel and use Chrome the bar disappears there too (Chrome worked fine with the original svg). If I move the right side down 1 pixel too it reappears.

The only package that does seem to work so far (even when I manipulate the sides) is Libre Office.

I will postpone using svg masks for now and use a white background instead, because I want a logo that works for many packages.

Let's imagine that the lines had no stroke. The top two lines are at an angle so that if you drew a box round them aligned to the x and y axes it wouldn't be empty.

The bottom line is horizontal. If you exclude its stroke-width then the bounding box has no height.

It turns out this is important!

You don't specify a maskUnits attribute so the default is used http://www.w3.org/TR/SVG/masking.html#Masking which is objectBoundingBox and it turns out that this (http://www.w3.org/TR/SVG/coords.html#ObjectBoundingBox) is incompatible with shapes that have no bounding box.

The SVG specification says this specifically...

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

Thank you, that makes sense.

I didnt realize a line with a thickness was something different then a polyline with 4 nodes.

When I change the lines to this it works:

 <polyline stroke="black" points="94,765 440,165 560,235 214,835" mask="url(#circles)"/>
 <polyline stroke="black" points="786,835 440,235 560,165 906,765" mask="url(#circles)"/>
 <polyline stroke="black" points="154,730 846,730 846,870 154,870" mask="url(#circles)"/>