2D-рендеринг и масштабирование с помощью SVG

Question

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

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

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

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

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

Благодарить

Answer 1

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

stroke-width:"1%"

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

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

---

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

vector-effect="non-scaling-stroke"

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

Answer 2

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

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

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

Answer 3

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