Есть несколько кнопок, нарисованных в Inkscape
. Нарисованы они друг под другом.
При сохранении в svg
образуются path
с координатами Inkscape
.
Для работы с svg
использую Snapsvg
. Загружая файл и отрисовывая отдельные кнопки, они рисуются как и в Inkscape
, с такими же отступами.
Как этого избежать? Т.е. нужно как то преобразовать координаты всех кнопок, чтобы path
начинался с (0,0)
-
вот здесь ru.stackoverflow.com/a/801156/28748 очень подробно, на примерах показано, как преобразовать патч к началу координат– Alexandr_TT5 апр 2018 в 6:14
Добавить комментарий
|
1 ответ
Для этой цели используется 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>