#html #reactjs #svg #npm #attributes
#HTML #reactjs #svg #npm #атрибуты
Вопрос:
Из-за конфиденциальности я не могу вдаваться в подробности кода, с которым я работаю, но я сделаю все возможное, чтобы описать проблему, с которой я столкнулся.
Мой профессор создал простую программу React, которая генерирует и выводит SVG-файлы на основе набора параметров для проекта по производству микрочипов. Для создания SVG-файлов мы используем библиотеку Flatten-js npm, а также некоторые вспомогательные функции, которые объединяют все вместе. Мы указываем параметры в виде числа, но число представляет единицы измерения в микронах. У нас есть функция сохранения, которая загружает svg с веб-страницы, которая использует сглаживание.Метод Polygon.svg(). Метод принимает некоторые параметры, но указание единиц измерения не является одним из них. SVG выглядит примерно так:
<svg>
<path stroke="none" stroke-width="1" fill="black" fill-rule="evenodd" fill-opacity="1" d="
M5999.774896627996,6000.3432414235895 L5992.810049576532,6002.509804857073 A0.0338333333333333,0.0338333333333333 0 0,1 5992.789950423468,6002.445192150708 L5999.754797474932,6000.278628717223 A0.04999999999999982,0.04999999999999982 0 0,1 5999.8,6000.25 L6005.7,6000.25 A0.04999999999999982,0.04999999999999982 0 0,1 6005.7,6000.35 L5999.8,6000.35 A0.04999999999999982,0.04999999999999982 0 0,1 5999.774896627996,6000.3432414235895 z
..."></path>
</svg> Проблема в том, что мне нужно импортировать svg в Adobe Illustrator и Fusion 360. Когда я их импортирую, SVG работает достаточно хорошо, чтобы содержать формы, которые мы предсказываем, но масштабирование неверно. Поскольку единицы измерения должны были быть в микронах, но F360 работает в мм, я ожидал, что мне придется уменьшить его до 0,001 размера, но при масштабировании он слишком мал. Я предполагаю, что это как-то связано с программой, предполагающей значение DPI пути, поэтому в Illustrator я надеялся, что смогу указать PPI вручную, но он имеет только предустановленные значения 72PPI и 300PPI, но размер svg в Illustrator одинаков независимо от настройки PPI.
В какой-то момент это перестает касаться React и больше касается специфики путей html и svg, но программа использует React для выполнения того, что она делает. Я надеюсь, что мы сможем сделать это в коде, но если мне придется редактировать SVG вручную, я это сделаю. Любая информация будет оценена. Спасибо!
Комментарии:
1. используйте атрибут transform, чтобы задать любое масштабирование, которое вам нужно.
2. «Я не могу вникнуть в специфику кода» — пожалуйста, предоставьте какой-нибудь образец «игрушечного» кода
3. Простая программа React генерирует и выводит SVG без атрибута viewBox?
4. Чтобы объяснить, что, вероятно, думает @enxaneta,
<svg width="1mm" height="1mm" viewBox="5000 6000 1000 1000">будет определять единицы пользовательского пространства для пути как микроны.5. Я думаю, что мы к чему-то пришли, но атрибут viewBox не был сгенерирован. Хотя я могу ввести это вручную. Я могу указать параметр viewBox в svg, но мне интересно узнать об атрибуте transform, на который ссылается @RobertLongson. Я изучу это и сообщу.
Ответ №1:
Чтобы объяснить, что, вероятно, думает @enxaneta,
<svg width="1mm" height="1mm" viewBox="5000 6000 1000 1000">будет определять единицы пользовательского пространства для пути как микроны.
Оказывается, это было наиболее очевидным решением. Это в сочетании с атрибутом преобразования для масштабирования от микронов до мм. Спасибо всем за быстрые ответы!