2D рендеринг и увеличение с SVG

Question

Моя задача - разработать алгоритм, который бы совмещал различные типы кривых с заданной последовательностью точек в 2-мерном пространстве.

Чтобы проверить мой алгоритм, я выбрал SVG для отображения результата. У меня есть несколько проблем с этим.

Поскольку в моем алгоритме могут быть очень разные входы и выходы, очень важно, чтобы я мог просматривать сгенерированные файлы SVG с возможностью увеличения!

Но путь в SVG может отображаться только с определенной шириной. Если я увеличу масштаб, то ширина пути становится шире. Я хотел бы, чтобы ширина была, например, 1 пиксель на всех уровнях масштабирования. Есть ли решение для этого?

Также: SVG может отображать точки? Да, простые, грубые моменты. Я обнаружил, что это не может.

Спасибо

Answer 1

Многие другие векторные форматы (такие как PostScript и PDF) позволят вам использовать ширину обводки 0 для обводки "линии роста волос". Не так с SVG. Тем не менее, я думаю вы можете достичь того, что вы хотите, если вы используете процентную ширину штриха. См. спецификации w3c SVG для деталей , но, в принципе, вы должны быть в состоянии сделать что-то вроде этого:

stroke-width:"1%"

Это должно обвести вашу кривую шириной линии, равной 1% от ограничивающего прямоугольника, независимо от уровня масштабирования.

Что касается очков, SVG их не поддерживает. Когда я делал это в прошлом (используя PostScript), я всегда использовал дугу с маленьким redius , чтобы нарисовать маленький круг (который вы можете заполнить, чтобы сделать точку, если хотите).

---

@ Zoli: После вашего комментария я собирался предложить вам заглянуть в PostScript, чтобы вы могли использовать ширину обводки, когда я наткнулся на векторный эффект без масштабирования обводки в спецификации SVG :

vector-effect="non-scaling-stroke"

Просто добавьте это к вашей кривой, и оно должно быть инвариантным к масштабированию, согласно спецификации. Их пример использует line, но он должен работать и на ваших кривых.

Answer 2

В SVG в настоящее время нет элемента или чего-либо подобного, но добавление, которое обсуждалось в SVG WG, может быть добавлено в будущем. Не стесняйтесь высказать свои потребности и требования для элемента в общедоступный список рассылки svg: www-svg@w3.org.

Обходной путь должен использовать, например, элементы и позволить им иметь нулевую длину, если вы хотите, чтобы у вас были круглые линейные колпачки, чтобы отображать точку. Все зависит от того, для чего вам это нужно. Лучше всего подойдет круг с r = 0.

Свойство 'vector-effect' со значением 'non-scaling-stroke' - это то, что вы должны использовать, чтобы сказать, что обводка не должна масштабироваться. Это не так сложно реализовать решение javascript, которое обеспечивает правильное масштабирование штрихов, если «вектор-эффект» изначально не поддерживается. Opera 9.5+ поддерживает его изначально.

Answer 3

Спасибо, Наафф, за помощь. Я думаю, что я останусь с Firefox, и я определю для каждого выполнения алгоритма ширину линии в сгенерированном файле SVG. Это будет достаточно для меня.