Изменение положения элемента SVG из его XML

Question

У меня есть несколько значков SVG, которые я помещаю в середину кружка SVG на моей веб-странице. Я использую ту же функцию javascript с Snap для всех изображений, но только одна не центрирована должным образом...

Я попытался поместить svg в html, чтобы проверить его (см. http://jsfiddle.net/aop5znab/), но, как вы можете заметить, мяч расположен правильно, но не тот человек, который должен быть слева вверху. тоже (например, под мячом...).

Насколько я знаю SVG, положение может быть изменено с transform Атрибутировать или непосредственно в пути (относительные или абсолютные точки пути). Моя иконка не имеет transform атрибут, поэтому я думаю, что это могут быть только точки пути, которые позиционируют его по-другому.

Кто-нибудь может сказать мне, если я прав?

• Если да, что я могу изменить в xml моего SVG, чтобы установить его в левую верхнюю позицию (без transform пожалуйста)
• Если нет, в чем проблема?

Вот мой 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>

Примечание: я попробовал это, но это ничего не изменило...

Answer 1

Лучшее решение, которое я нашел, - это использовать inkscape, как описано в этой теме: Удаление преобразований в файлах SVG.

Вот копия / прошлое шагов, предложенных в ответе:

Удалить трансформации в Inkscape

1. Откройте файл SVG в Inkscape
2. Идти к Edit > XML Editor
3. найти transform атрибуты в слоях и удалить их

Как полностью переместить все объекты без создания других атрибутов преобразования

1. Разгруппировать все сгруппированные элементы с Object > Ungroup
2. Идти к Edit > Select All in All Layers
3. Идти к Object > Transform

Затем в панели Transform

1. Uncheck Relative move и проверить Apply to each object separately
2. Задавать Horizontal а также Vertical значения в соответствии с вашими потребностями и нажмите Apply