Как использовать дюймы с оснасткой SVG?

Question

Я только начал играть с оснасткой и пытался работать в дюймах вместо пикселей, это возможно? Если да, то как мне использовать дюймы? Кажется, что некоторые функции принимают дюймы, а некоторые нет?

// This works
var s = Snap("1.5in", "1.5in");

// This works
s.rect("0in", "0in", "1.5in", "1.5in").attr({
    stroke: "#f00",
    fill: "transparent"
});

// This works
s.path("M0,144L144,0").attr({
    stroke: "#f00"
});

// This fails (Error: Invalid value for <path> attribute d="M0in,0inL1.5in,1.5in")
s.path("M0in,0inL1.5in,1.5in").attr({
    stroke: "#f00"
});

Answer 1

Как вы обнаружили, определенные значения SVG принимают только необработанные числа (интерпретируемые как пользовательские координаты SVG), а не длины с единицами измерения. Атрибут пути "d" является одним из них.

Это не проблема snap.svg, это то, как работают базовые элементы SVG.

Самый простой подход - создать для себя коэффициент пересчета. Начальное значение для пользовательских координат SVG состоит в том, что 1 пользовательская единица равна одной CSS-единице "пиксель". По стандартам CSS, единица измерения "пиксель" в точности равна 1/96 от единицы "дюйм" (дюйм). Если вы масштабируете SVG с помощью transforms или атрибута viewBox, все единицы длины соответственно масштабируются, поэтому соотношение остается постоянным.

Следовательно, чтобы создать путь, эквивалентный "M0in,0inL1.5in,1.5in"Вы бы умножили каждое число на 96 и затем связали строку вместе:

s.path("M0,0L" + 1.5*96 + "," + 1.5*96).attr({
    stroke: "#f00"
});

Если у вас есть длинный и сложный путь для создания, стоит упомянуть, что Array.join("") является более эффективным, чем + оператор для объединения длинного списка строк и чисел в одну строку.

Тем не менее, имейте в виду, что модуль CSS/SVG "in" не всегда будет отображаться на экране с точностью до дюйма. Если вы печатаете документ, он должен быть довольно точным. Но, конечно, если вы масштабируете или трансформируете свой SVG, он может не приблизиться к дюйму.