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)

simple 02.04.2014 00:05

Aetae, да так и есть, разобрался. Вот еще прошу объяснить по viewBox, что то я запутался совсем. Создаю холст 600х300, устанавливаю координаты viewBox(0, 0, 800, 600), т.е по оси Х 800/600 = 1.33 единицы на 1 px. Так? Или неправильно я считаю? И рисунок по этим координатам получается не с нулевой точки X как описано в элементе path, а немного смещен в право на процентов 20, почему так? Что я не правильно делаю?

<svg width="600" height="300" viewBox="0,0, 800, 600" shape-rendering="crispEdges">
<path d="M0 10, H10 V140 H0 Z" stroke="#D7523F" fill="#D7523F" vector-effect="non-scaling-stroke"/>
</svg>


А если сделать по оси X 1200px, (0, 0, 1200, 600), т.е в 2 раза больше оригинала, то все нормально рисует.

<svg width="600" height="300" viewBox="0,0, 1200, 600" shape-rendering="crispEdges">
<path d="M0 10, H10 V140 H0 Z" stroke="#D7523F" fill="#D7523F" vector-effect="non-scaling-stroke"/>
</svg>


Конечно можно указать атрибут preserveAspectRatio = "xMinYMid, meet" тогда все выравнивается на любых координатах, но все же почему так получается?

XAPuTOH 07.11.2017 13:13

Наткнулся на эту темку при поиске своей проболеммы:
SVG у меня состоит из других SVG(символы) нарисованных по определенным координатам в головном SVG.
Так вот при масштабировании в сторону уменьшения изображения у символов начинают пропадать элементы. Например есть линия которая при масштабе 100% имеет толщину 2 пикселя. Рисую несколько таких символа рядом. начинаю уменьшать всю картинку. У части символов эта линия пропала. Уменьшаю дальше. У некоторых линии появились а у некоторых пропали.
В общем как-то безконтрольно происходит отрисовка нового масштаба.

Вопрос как победить данный недуг?


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