BUG: SVG images with Patterns are not rendered correctly

[Emasoft]

SVG images with patterns, like this upper tab with a wood tile pattern fill, are not rendered correctly by the library. Some text is missing. Shadows and gradients are also broken.

Here you can download the UpperTab.svg file: http://www.yourfilelink.com/get.php?fid=942948&dv=1

[Emasoft]

Tested with the latest master branch, the results is the same:

The bugs are still there.

[csmoore]

The link to your test data does not seem to be working. But as a workaround for now I would suggest just using simpler fill patterns like shown in this example:
http://upload.wikimedia.org/wikipedia/commons/d/d1/Charts_SVG_Documented_Fill_Patterns.svg

& then you can ensure your SVGs will work in a wider range of environments (probably a goal anyway - I personally use Inkscape as my sanity test of when some SVG feature is too complex to be rendered by a really good library)

Below is some test data to something similar I have seen that does not work (in IE, Inkscape, or SVG) but does work in Illustrator and WebKit(Chrome) - but there is so much nesting going on in this Illustrator sample, I'm not sure I would know where to start to debug this.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Version_1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<pattern  x="-105.5" y="596.5" width="30" height="30" patternUnits="userSpaceOnUse" id="SVGID_1_" viewBox="0 -30 30 30" overflow="visible">
    <g> <polygon fill="none" points="0,0 30,0 30,-30 0,-30"/>
        <g> <polygon fill="none" points="0,-30 30,-30 30,0 0,0"/>
            <path fill="#333333" stroke="#333333" stroke-width="2" d="M15- 17c1.104,0,2,0.896,2,2s-0.896,2-2,2s-2-0.896-2-2 S13.896-17,15-17z"/> </g>
    </g>
</pattern>
<g id="main">
    <pattern  id="SVGID_2_" xlink:href="#SVGID_1_" patternTransform="matrix(1 0 0 1 -105.5 17038.5)"> </pattern>
    <polyline fill="url(#SVGID_2_)" stroke="#808080" stroke-width="5" points="99,340 299,339 375.5,164 198.5,60 22.5,164 98.5,340"/></g>
</svg>

[Emasoft]

I've published the svg file as a JSFiddle, take a look:

upperTab.svg - http://jsfiddle.net/EmanueleS/pF7GZ/

[csmoore]

Seems to be (at least) 2 things going wrong in that (somewhat complex) example: 1) missing text: "Years: 7" 2) missing pattern. But the pattern issue does seem related to the same issue I encountered above with nested url ids in the pattern element. If you are able to come up with a simpler example of the pattern issue might be worthwhile to post also.

[Emasoft]

Here is a more simplified svg image, only with patterns.

Here is the fiddle:

custom-pattern-tiling-test.svg - http://jsfiddle.net/EmanueleS/9T3YM/

[H1Gdev]

In #523, issue of pattern is solved.