svg “use” tag displays an svg icon upside down

Question

My designer gave me an svg icon. I display this icon in a D3.js tree layout. To be able to change the colors I embed the icon in a tag.

The weird thing is that the icon is diplayed upside down (using chrome). I dont really understand what is going on there.

I must apply a transformation to get it right

Any Idea ?

The HTML :

    <img src="/assets/img/PurchaseOrder.svg" />
    <svg class="menu-icon" width="150" height="150"  style="opacity: 1;"><use x="0"y="0"width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/img/PurchaseOrder.svg#PurchaseOrder.svg"></use></svg>
    <svg class="menu-icon" width="150" height="150"  style="opacity: 1;"><use x="0"y="0"width="50" height="50" transform="scale(1,-1) translate(0,-50)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/img/PurchaseOrder.svg#PurchaseOrder.svg"></use></svg>

The CSS

.menu-icon {
        pointer-events: none;
        fill:#626469;
    }

The result

The svg :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.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="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<symbol  id="ProjectOrder.svg" viewBox="-12 -12 24 24">
    . . .
</symbol>
<use xlink:href="#ProjectOrder.svg"  width="24" height="24" x="-12" y="-12" transform="matrix(1 0 0 -1 11.9995 11.9995)" style="overflow:visible;"/>
</svg>

Answer 1

replace the HTML with the following

<img src="/assets/img/PurchaseOrder.svg" />
    <svg class="menu-icon" width="150" height="150"  style="opacity: 1;"><use x="0"y="0"width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/img/PurchaseOrder.svg#PurchaseOrder.svg"></use></svg>
    <svg class="menu-icon" width="150" height="150"  style="opacity: 1;"><use x="0"y="0"width="50" height="50" transform="translate(0,-50)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/img/PurchaseOrder.svg#PurchaseOrder.svg"></use></svg>

what i did is remove the scale(1,-1) from the transform.

what you are doing with scale is basically flipping the Y axis with -1 thats why it is upside-down.

Answer 2

css property transform: rotate(180deg); will do flip.

Answer 3

This looks as the same problem that I raised here: https://graphicdesign.stackexchange.com/questions/76574/adobe-illustrator-svg-upside-down-transform-matrix .

Converting an object to a symbol in illustrator is messed up. The object is placed inside the symbol upside-down. The symbol is then placed in the document upside-down, too, so the overall effect looks right.