Мы используем Fabric.js 1.7.20. Мы не можем (пока) обновить до 2.0 +.
http://jsfiddle.net/tcem4f4L/
Проблема в том, что мы добавляем объекты SVG на карту, но когда они получают выходные данные в SVG, некоторые отступы в SVG приводят к тому, что рендеринг выглядит не корректно. Координаты svg x / y и любые линии внутри них должны учитывать ход.
Я пытаюсь найти чистый способ справиться с ними и убедиться, что ограничивающая рамка на холсте находится вокруг SVG для выравнивания.
Пример SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="95" height="11" viewBox="0 0 95 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="95" height="11"></rect>
<path stroke-linecap="square" stroke-width="3" d="M1,9 l93,0"/>
</g>
</svg>
Итак (я думаю), чтобы исправить это при выводе в SVG, мне нужно изменить прямоугольник x и y на 0.5 и путь к d = "M1.5,9.5 l93,0"
Я беспокоюсь, что в этом есть и другие вещи, которые мне не хватает.