Как сделать в raphael — svg резиновым?

Question

[Сергей]

Почему svg не резинится? https://clck.ru/ABHTn уже что только не перепробывал, вроде все прописано в атрибутах но все равно не хочет резиниться, подскажите что не так?

Answer 1

[Александр Карпов]

Используйте preserveAspectRatio="xMidYMid meet"
немного переводил и дополнял об этом тут https://developer.mozilla.org/ru/docs/SVG_In_HTML_...
и кстати, svg.js показался мне круче рафаеля

Comments

[Сергей]

добавил, но все равно не масштабирует, добавлял таким способом $('#paths_plan svg').attr('preserveAspectRatio', 'xMidYMid meet');

[Александр Карпов]

Сергей: viewbox не в процентах должен быть

[Александр Карпов]

Сергей: Я поделюсь ссылочкой, поизучайте: berezki54.ru/novolugovoe/?arrFilter_46_2645610321=...
Я правда использовал svg.js , может быть для вас будет полезно. Чтобы увидеть, что svg резинится, вам вручную нужно изменить размер блока родителя

[Александр Карпов]

Сергей: У меня работает если я вставляю, у вас CamelCase не соблюден в название тега preserveAspectRatio="xMidYMid meet"

[Сергей]

Александр Карпов: у вас резинится, у себя то же самое прописал но не работает, в каком-то проекте уже делал чтобы резинилось но не вспомню что там делал, возможно тут какая-то хитрая ошибка

[Сергей]

Александр Карпов: спасибо за подсказку, сделал в CamelCase все заработало, но JQ через .attr не вставляет с CamelCase, вот скрипт который это исправляет, может кому пригодится:

[Сергей]

Скрипт
jQuery.extend({
_originalAttr: jQuery.attr,
attr: function(elem, name, value) {
if (typeof SVGElement !== 'undefined' && elem instanceof SVGElement) {
if (typeof value === 'undefined') {
value = elem.getAttribute(name);
} else if (value === null) {
elem.removeAttribute(name);
} else {
elem.setAttribute(name, value + "");
}
return value;
}
return jQuery._originalAttr(elem, name, value);
}
});