Restore parsing svg elements as a parent in caso of use tag plus svg tag

[asturur]

fixes parsing regressions from #2341 derived from #2311
closes #2341

[asturur]

ouch we added test for this :(

[asturur]

no wait we need different solution.
Fifrefox and chrome does not parse attributes from SVG tag.
So the regex is correct, but we need to catch those attributes in some way, because we need them to descend on the child elements if we are referring an svg with the USE tag.

[asturur]

an overkill but a working solution.
if we are using SVG as referenced by use tag, we change the svg with a "g" element and we pass all attributes over and all childs under.
@kangax any idea?

[asturur]

Need proper inspection because we should also support new viewbox from inner svgs.
I will check it another day.

[kangax]

This is so that it catches SVG and svg?

[kangax]

@asturur definitely need some unit tests for this. Could you please add a couple? Thanks!

[asturur]

i want to improve some functionality of viewbox, very rare but i prefer to make them work.

i need to create some test svg that we will use also for testing.

do not parse till me signal

[asturur]

we should support this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="980" height="950" >
    <defs>
        <!-- Definition Motif remplissage : un seul par porte -->
        <svg id="Imposte" width="465" height="130" >
            <g fill="#00FF00" stroke="none" >
                <rect x="10" y="10" width="15" height="15"/>
                <rect x="50" y="50" width="15" height="15"/>
                <rect x="50" y="10" width="15" height="15"/>
                <rect x="90" y="10" width="15" height="15"/>
            </g>
        </svg>
        <svg id="Imposte2" width="465" height="130" viewBox="15 15 465 130" >
            <g fill="#0000FF" stroke="none" >
                <rect x="10" y="10" width="15" height="15"/>
                <rect x="50" y="50" width="15" height="15"/>
                <rect x="50" y="10" width="15" height="15"/>
                <rect x="90" y="10" width="15" height="15"/>
            </g>
        </svg>
        <svg id="Imposte3" width="465" height="130" viewBox="0 0 232 65" >
            <g fill="#FF0000" stroke="none" >
                <rect x="10" y="10" width="15" height="15"/>
                <rect x="50" y="50" width="15" height="15"/>
                <rect x="50" y="10" width="15" height="15"/>
                <rect x="90" y="10" width="15" height="15"/>
            </g>
        </svg>
    </defs>
    <g transform="translate(0,10)">
        <use xlink:href="#Imposte" />
        <use xlink:href="#Imposte2" />
        <use xlink:href="#Imposte3" />
        <use xlink:href="#Imposte" transform="translate(100,40)"/>
        <use xlink:href="#Imposte2" transform="translate(100,80)"/>
        <use xlink:href="#Imposte3" transform="translate(100,80)"/>
    </g>
</svg>

actually doing:

[asturur]

original

parsed

more than this we cannot go, i explain you why:

Normally SVG defined by width and height, and what is outside it, and what has negative coords, is cutted out.
When an element estabilish a new viewport, what is outside is outside.
In the original test.svg i posted here the blu squares looks rectangular but they are simply offscreen and they are cut away.

I can implement simple viewbox clipping for the MAIN svg element but not yet for the others because we loose group information.

[asturur]

Actually we are not applying viewBox scaling factor if width or height are not specified.
I do not find any spec and i do not see coherent behaving between browsers to understand what we should do.

[asturur]

ok removed useless parameters from addVBtransform.

i need to find out a simple test for it.
i should extend the current test, adding a viewbox and a transform attribute to check.

[asturur]

i lost all my changes???

[asturur]

@kangax give a review to code changes, i'll prepare the tests.

[asturur]

under node js :

descendants = doc.selectNodes('//*[name(.)!="svg"]');

it means that we discard inner svg in descendat
so we will not iterate over them:

var elements = descendants.filter(function(el) {
        addVBTransform(el);
        return reAllowedSVGTagNames.test(el.tagName) &&
              !hasAncestorWithNodeName(el, reNotAllowedAncestors); 
      });

so we are not applying eventual viewboxtransform over them.

Any chance this has been fixed in node or we can change with:
descendants = doc.selectNodes('//*[name(.)!="x"]');

[asturur]

@kangax You can merge this.
www.deltalink.it/andreab/fabric/a.html

all svgs still parsing good.