CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Ulterior
Ulterior

Reputation: 2892

Dynamic SVG element doesn't use mask properly

I am using SVG hatch mask for my custom, inline created SVG, here's the fiddle

http://jsfiddle.net/m3jrm1ow/

But I can get it to work dynamically, and it appears firefox is rendering this differently from chrome? I looked into generated code, but all I can tell is there is url() function problem

The middle column is hatched properly only if it takes the url from a statically created mask id

<svg width="0" height="0">
    <defs>
        <pattern height="3" width="3" patternUnits="userSpaceOnUse" id="stripe1">
            <line y2="0" x2="3" y1="3" x1="0" stroke-width="1px" stroke="white" fill="white"></line>
        </pattern>
        <mask maskUnits="userSpaceOnUse" id="mask1">
            <rect fill="url(#stripe1)" height="1000" width="1000"></rect>
        </mask>
    </defs>
</svg>

So I would expect all columns rendered equally on all browser,

I really was looking into a bit different issue, but when I started assembling fiddle is turned out completely out of wack...

Upvotes: 0

Views: 522

Answers (1)

Robert Longson
Robert Longson

Reputation: 124049

In the markup your mask's rect has width/height of 1000. In the dynamic cases it is 0. I.e.

.attr("width", "0")
.attr("height", "0")

change these to 1000 and it works.

Upvotes: 1

Related Questions