Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Масштабирование в svg без потери качества (https://javascript.ru/forum/misc/45703-masshtabirovanie-v-svg-bez-poteri-kachestva.html)

Aetae 25.03.2014 21:34

Ну ещё можно не задавая 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 25.03.2014 21:47

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

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

Aetae 25.03.2014 21:52

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

Georgiy_M 25.03.2014 23:31

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

Aetae 26.03.2014 00:16

Цитата:

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

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

simple 26.03.2014 11:41

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

Georgiy_M 26.03.2014 18:09

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

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

simple 26.03.2014 20:05

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 30.03.2014 22:08

Кто нибудь знает атрибут cs в теги path за что отвечает? Разбирал библиотеку amCharts и там везде присутствует этот атрибут.
<path cs="100, 100" d="..."/>
Нагуглить ничего по нему не получилось.

Aetae 31.03.2014 00:07

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


Часовой пояс GMT +3, время: 06:29.