Масштабирование в svg без потери качества

[Aetae]

Ну ещё можно не задавая viewBox указывать размеры простых фигур в процентах и из оных склеивать то что нужно. При этом пиксели остаются пикселями. Вот только баг то или фича - не знаю.)
...
Ещё вот что нагуглил:

vector-effect="non-scaling-stroke" is an SVG 1.2 Tiny feature that forces the stroke width to be exactly what you specify, no matter what scaling or unit transforms are in effect. It is supported by FF and Chrome (maybe others) but not IE (so far) unfortunately. If you can live with that, then it is the simplest solution to your problem.

Вроде работает:

<svg width="300" height="300" viewBox="0,0, 3000,3000">
    <path d="M1 1 V1500" stroke-width="1px" stroke="#000000" vector-effect="non-scaling-stroke"/>
</svg>

[simple]

О, это кажется то что мне нужно! Благодарю!
Хоть цвет и все равно не чисто черный, но это уже что то. Буду копать дальше, должно же что то быть обязательно.

PS. Хотя я наверное изначально неправильно подхожу к задачи. Делаю линейный график цен, на холсте к примеру 600х300, допустим ценовой минимум 2000 и максимум 3000 у графика, вот как это все правильно нарисовать на холсте с заданным размером. Я делаю следующее, прогоняю массив цен на поиск мах и мин значения, вычисляю коэффициент масштаба, создаю новый массив цен по заданному коэффициенту уже подогнанный под размер холста. Рисую. Но что то мне это не очень нравиться. Криво все равно как то.

[Aetae]

simple, если не смущает традиционное "but not IE" - то да.)

[Georgiy_M]

Сейчас тоже работаю с SVG, штатное маштабирование, очень портит картинку. Главный плюс SVG между точками например x1 и X2 не обязательно растояние должно быть целым числом. поэтому самым красивым способом оказалось ввести некий коэфициент(множитель), который вичисляю перед началом прорисовки, а затем на него перемножаю координаты

[Aetae]

Сейчас тоже работаю с SVG, штатное маштабирование, очень портит картинку. Главный плюс SVG между точками например x1 и X2 не обязательно растояние должно быть целым числом. поэтому самым красивым способом оказалось ввести некий коэфициент(множитель), который вичисляю перед началом прорисовки, а затем на него перемножаю координаты

Если масштабировать готовый растр снаружи с помощью css - естесно картинка испортится. При правильном же viewBox вектор остаётся вектором, что мы выше и выяснили.

[simple]

Georgiy_M, https://developer.mozilla.org/ru/doc...hape-rendering

[Georgiy_M]

спасибо за ссылку и за вашу тему, сейчас мне это полезно.
По теме SVG
1 не сталкивалис с проблемой определение координат мыши в блоке SVG? как эту проблему корректнее решать, намекните.

2 MS на своём сайте в разделе для разработчиков описывает применение SVG, но по факту самое полезное в IE не работает.

[simple]

Georgiy_M,
1. Еще не сталкивался. Но думаю ничего сложного, так как SVG - это часть DOM-дерева, следовательно там все также как и с обычными DOM элементами. Вешаем обработчик события и получаем координаты clientX clientY объекта Event.

Если Вы об этом, то:

<svg width="400" height="200" onclick="alert(event.clientX + ' / ' + event.clientY)">
<rect x="0" y="0" width="400" height="200" fill="red" stroke="black"/>
</svg>

2. В IE там другая архитектура, VML называется. Я забил на IE.

[simple]

Кто нибудь знает атрибут cs в теги path за что отвечает? Разбирал библиотеку amCharts и там везде присутствует этот атрибут.

<path cs="100, 100" d="..."/>

Нагуглить ничего по нему не получилось.

[Aetae]

simple, скорее всего левый атрибут, используемый библиотекой. В спеке его нет.