У меня есть сложный чертеж, который я проследил в Inkscape. Я собираюсь программно анимировать путь, а также добавить некоторые другие эффекты с помощью JavaScript. Я могу включить файл с помощью HTML (например <img src="filename.svg"/>), но как мне тогда манипулировать каждым путем в этом файле SVG?
До сих пор я вручную переносил значения в HTML путем копирования и вставки (например <svg><path d="x,y x,y x,y..."/>), затем я мог атрибутировать идентификаторы и классы для каждого пути и использовать эти идентификаторы и классы для управления путями с помощью JavaScript, но это чрезвычайно кропотливый. Должен быть лучший и более быстрый способ сделать это.
Я искал везде, и мне удалось найти только инструкции по экспорту путей с помощью Python, который у меня не установлен в этой системе Windows.
Есть ли способы сделать это изначально в Inkscape? Или какие-то другие способы, о которых вы знаете?
Если вашей целью является доступ к SVG из вашего HTML (например, для анимации с помощью JavaScript или стиля с помощью CSS), вам необходимо использовать встроенный SVG (например, вставить необработанный код SVG в HTML), если вы используете свой SVG с тег <img>или как фоновое изображение CSS, то вы не можете получить доступ к DOM SVG из своего HTML-документа.
Самый простой способ включить ваш файл, если вы используете серверный язык, такой как PHP, — это включить содержимое файла; что-то вроде:
<?php echo file_get_contents("my_svg.svg"); ?>
Это буквально напечатает содержимое SVG в HTML, в отличие от использования тега <img>, который просто отображает изображение.
Если вы работаете исключительно с HTML, вам нужно скопировать и вставить код SVG в свой HTML, но вы можете скопировать и вставить весь SVG , не нужно захватывать определенные pathатрибуты или что-то еще. Поскольку SVG — это просто XML, вы можете открыть файл в текстовом редакторе (например, Блокноте или TextEdit) или в редакторе HTML и получить код.
В Inkscape есть XML-редактор , который может вам пригодиться, но я не уверен, что вы сможете скопировать оттуда весь код. Также стоит отметить, что Inkscape по умолчанию сохраняет файлы как собственный тип SVG с некоторыми специфическими тегами и командами Inkscape (они имеют соответствующее пространство имен, поэтому это не должно вызывать проблемы, но вы никогда не знаете), так что может быть лучше сохранить ваш файл как обычный SVG .
Вы можете узнать больше об использовании SVG (и доступе к SVG с помощью внешнего JavaScript и CSS) в этой статье CSS-Tricks (я дал ссылку на соответствующую часть статьи):
И связанный с этим вопрос о переполнении стека:
inkscapeимен, что является абсолютно допустимым SVG. У большинства приложений (и браузеров) с этим проблем нет, и они игнорируют его. Обычный SVG удаляет всю эту дополнительную информацию и обычно требуется только тогда, когда приложение плохо работает с дополнительным пространством имен.
Винсент