3

Есть несколько кнопок, нарисованных в Inkscape. Нарисованы они друг под другом.
При сохранении в svg образуются path с координатами Inkscape.
Для работы с svg использую Snapsvg. Загружая файл и отрисовывая отдельные кнопки, они рисуются как и в Inkscape, с такими же отступами.
Как этого избежать? Т.е. нужно как то преобразовать координаты всех кнопок, чтобы path начинался с (0,0)

1
  • вот здесь ru.stackoverflow.com/a/801156/28748 очень подробно, на примерах показано, как преобразовать патч к началу координат 5 апр 2018 в 6:14

1 ответ 1

3

Для этой цели используется viewBox:

  <symbol viewBox="0 0 20 20" id="shape1"> 

viewBox, установленный в теге <symbol> определяет координаты конкретного элемента, где он находится и какой его размер:

<svg style="display:none;">
    <symbol viewBox="0 0 20 20" id="shape1">
        <circle fill="blue" cx="10" cy="10" r="9"/> 
    </symbol>
    <symbol viewBox="100 100 10 10" id="shape2">
        <circle fill="green" cx="105" cy="105" r="4.5"/> 
    </symbol> 
</svg>
Два круга разных размеров и в разных местах с правильно настроенным viewBox выглядят одинаково:<br>
<svg width="35" height="35">
    <use xlink:href="#shape1" width="35" height="35" x="0" y="0" id="apis"></use>
</svg>
<svg width="35" height="35" >
    <use xlink:href="#shape2" width="35" height="35" x="0" y="0" id="apis"></use>
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.