Changing svg element position from its xml

Question

I have some SVG icons that I place in the middle of a svg circle in my web page. I use the same javascript function with Snap for all images but only one is not centered properly...

I tried to put directly the svg in the html to test it (see http://jsfiddle.net/aop5znab/) but as you can notice, the ball is placed correctly, but not the man, which should be on the top left too (like, below the ball...).

As far as I know SVG, the position can be changed with the transform attribut or directly in the path (relativ or absolute path points). My icon hasn't a transform attribute so I think it can only be the path points that are positioning it differently.

Can anybody tell me if I'm right ?

If yes, what can I change in the xml of my SVG to set it to the top-left position (without transform please)
If no, what's the problem ?

Here is my SVG :

<g style="fill:#808080">
    <g fill="#0ea507">
        <circle cx="75.042" cy="68.168999" r="4.3889999" fill="#0ea507" d="M 79.431,68.168999 C 79.431,70.592976 77.465978,72.557999 75.042,72.557999 72.618022,72.557999 70.653,70.592976 70.653,68.168999 70.653,65.745021 72.618022,63.779999 75.042,63.779999 77.465978,63.779999 79.431,65.745021 79.431,68.168999 z"/>
        <g fill="#0ea507">
            <g fill="#0ea507">
                <g fill="#0ea507">
                    <polyline
                        points="67.165,87.193 70.991,77.023 74.929,77.023"
                        fill="#0ea507" />
                    <path
                        d="M 67.165,89.22 C 66.928,89.22 66.687,89.178 66.451,89.089 65.404,88.695 64.875,87.527 65.269,86.48 L 69.096,76.31 C 69.393,75.521 70.148,74.998 70.992,74.998 H 74.93 C 76.049,74.998 76.956,75.905 76.956,77.024 76.956,78.143 76.049,79.049 74.93,79.049 H 72.393 L 69.06,87.907 C 68.755,88.719 67.984,89.22 67.165,89.22 z"
                        id="path3010"
                        fill="#0ea507" />
                </g>
                <g
                    fill="#0ea507">
                    <polyline
                        points="82.92,87.193 79.094,77.023 75.155,77.023"
                        fill="#0ea507" />
                    <path
                        d="M 82.92,89.22 C 82.101,89.22 81.329,88.719 81.024,87.907 L 77.691,79.049 H 75.154 C 74.035,79.049 73.129,78.142 73.129,77.024 73.129,75.905 74.036,74.998 75.154,74.998 H 79.093 C 79.936,74.998 80.692,75.521 80.989,76.31 L 84.815,86.48 C 85.209,87.527 84.68,88.695 83.633,89.089 83.399,89.177 83.158,89.22 82.92,89.22 z"
                        fill="#0ea507" />
                </g>
            </g>
            <path
                d="M 75.042,75.006 C 75.042,75.006 80.782,74.556 80.219,80.183 79.656,85.81 77.63,103.365 76.617,103.478 75.604,103.591 75.942,103.703 75.042,103.703 74.142,103.703 74.479,103.591 73.467,103.478 72.454,103.365 70.428,85.809 69.865,80.183 69.302,74.557 75.042,75.006 75.042,75.006 z"
                fill="#0ea507" />
            </g>    
        </g>
    </g>

Note : I tried this but it didn't changed anything...

You are correct. Why no transform (as thats the obvious solution) ? Either you have to place a transform, or transform all of the points and save it again. Choice is yours :). — Ian, Sep 30 '15 at 15:10
your points are what is defining position, here's a [fiddle](http://jsfiddle.net/maio/aop5znab/4/) using translate — maioman, Sep 30 '15 at 15:28
@Ian `transform` is not ok for me because I use the `Snap.svg` method `element.getBBox()` to calculate the position of the object and then the `Snap Matrix` to scale/translate it. As I tried, with the transform the position is wrong after the scale... :( — ylerjen, Oct 01 '15 at 05:54
You can still put a transform on the outer g or something. You can also apply the same transform to the bounding box if necessary. It depends what you mean is causing the problem. You can also transform any path string with http://snapsvg.io/docs/#Snap.path.map if that helps. — Ian, Oct 01 '15 at 06:58

score 0 · Accepted Answer · edited May 23 '17 at 12:16

The best solution I've found is to use inkscape like answered in this thread : Removing transforms in SVG files

Here's a copy/past of the steps proposed in the answer :

Remove transforms in Inkscape

Open svg file in Inkscape
Go to Edit > XML Editor
Find transform attributes in layers and delete them

How to move all objects altogether without creating another transform attributes

Ungroup all grouped elements with Object > Ungroup
Go to Edit > Select All in All Layers
Go to Object > Transform

Then In Transform panel

Uncheck Relative move and check Apply to each object separately
Set Horizontal and Vertical values according to your needs and click Apply

Changing svg element position from its xml

1 Answers1