Визуализатор и редактор пути SVG

Визуализатор и редактор пути SVG

Вставьте любой атрибут d пути SVG и увидите его в реальном времени. Эта программа разбивает каждую команду на ее параметры и абсолютную конечную точку, рисует контрольные точки Бернеза поверх предварительного просмотра и переписывает путь между абсолютными и относительными координатами с настраиваемой точностью. Она предназначена для авторов SVG, которые хотят понять, очистить или вручную настроить исходную строку d, не выходя из браузера.

Как использовать

1. Вставьте содержимое вашего атрибута d пути (или нажмите «Попробовать пример») в поле ввода.
2. Настройте viewBox, чтобы соответствовать холсту, на котором был создан путь. По умолчанию 0 0 200 200 подходит для встроенных примеров.
3. Установите цвет линии, ширину линии и цвет заполнения, чтобы предварительно просмотреть, как будет выглядеть путь.
4. Выберите режим координат — оставить без изменений, перевести в абсолютные или перевести в относительные — и точность от 0 до 6 десятичных знаков.
5. Включите перекрытия, чтобы показать или скрыть сетку, нумерованные концы команд, контрольные точки Бернеза и анимацию рисования.
6. Скопируйте преобразованный атрибут d или скачайте полный самостоятельный SVG.

Возможности

• Реальный просмотр пути – отображает строку d в виде SVG-холста с настраиваемыми параметрами линии, заполнения и viewBox.
• Таблица разбора команд – перечисляет каждую команду по порядку с ее параметрами, метками аргументов и абсолютной конечной точкой.
• Перекрытие контрольных точек Бернеза – рисует пунктирные линии и оранжевые контрольные точки для команд C, S, Q и T, чтобы вы могли видеть, как формируются кривые.
• Нумерованные концы – отмечает начало пути зеленым и каждую последующую конечную точку синим с индексной меткой.
• Перевод абсолютных координат в относительные – переписывает всю строку d в одной из систем координат без изменения формы отображения.
• Округление координат – удаляет десятичные знаки от 0 до 6 мест для сжатия и нормализации данных пути.
• Перекрытие сетки – автоматически масштабируемые линии сетки и подчеркивание осей нуля, связанные с viewBox.
• Длина пути – использует API getTotalLength браузера для отображения общей длины, отрисованной в единицах viewBox.
• Анимация рисования – опциональная анимация stroke-dashoffset, которая рисует путь в цикле для визуального отладки.
• Экспорт самостоятельного SVG – скопируйте или скачайте полный файл SVG с примененными текущими значениями viewBox и стилей.

Поддерживаемые команды пути

• M / m – moveto: начинает новую под-путь в указанной точке.
• L / l – lineto: рисует прямую линию до указанной точки.
• H / h – горизонтальная lineto: рисует горизонтальную линию до указанного x.
• V / v – вертикальная lineto: рисует вертикальную линию до указанного y.
• C / c – кубическая кривая Бернеза: два контрольных пункта и конечная точка.
• S / s – плавная кубическая кривая Бернеза: автоматически отражает предыдущий контрольный пункт кубической кривой.
• Q / q – квадратичная кривая Бернеза: один контрольный пункт и конечная точка.
• T / t – плавная квадратичная кривая Бернеза: автоматически отражает предыдущий контрольный пункт квадратичной кривой.
• A / a – эллиптическая дуга: радиусы, угол оси X, флаг большой дуги и флаг направления, плюс конечная точка.
• Z / z – closepath: рисует прямую линию обратно к началу под-пути.