Изменение положения элемента svg из его xml

У меня есть несколько значков 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>

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


person ylerjen    schedule 30.09.2015    source источник
comment
Ты прав. Почему нет преобразования (поскольку это очевидное решение)? Либо вам нужно разместить преобразование, либо преобразовать все точки и сохранить его снова. Твой выбор :).   -  person Ian    schedule 30.09.2015
comment
ваши очки определяют позицию, вот скрипка с использованием перевода   -  person maioman    schedule 30.09.2015
comment
@ Ян transform мне не подходит, потому что я использую метод Snap.svg element.getBBox() для вычисления положения объекта, а затем Snap Matrix для его масштабирования/перемещения. Как я ни пытался, с преобразованием позиция неверна после масштабирования... :(   -  person ylerjen    schedule 01.10.2015
comment
Вы все еще можете поместить преобразование во внешний g или что-то в этом роде. Вы также можете применить то же преобразование к ограничивающей рамке, если это необходимо. Это зависит от того, что вы имеете в виду, что вызывает проблему. Вы также можете преобразовать любую строку пути с помощью snapsvg.io/docs/#Snap.path.map если это поможет.   -  person Ian    schedule 01.10.2015


Ответы (1)


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

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

Удалить преобразования в Inkscape

  1. Откройте файл svg в Inkscape
  2. Go to Edit > XML Editor
  3. Найдите transform атрибутов в слоях и удалите их

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

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

Затем панель «Преобразование»

  1. Снимите флажок Relative move и установите флажок Apply to each object separately
  2. Установите значения Horizontal и Vertical в соответствии с вашими потребностями и нажмите Apply
person ylerjen    schedule 30.01.2017