манипулировать файлом .svg с помощью javascript

Это мой первый опыт работы с SVG-файлами, и я не смог ответить на этот вопрос Google. У меня есть иллюстрация .svg, созданная из Adobe Illustrator. Я хочу загрузить это изображение в веб-страницу и иметь возможность манипулировать им с помощью javascript. Есть ли библиотека javascript, которая позволяет мне это делать? Библиотека должна работать с текущими мобильными устройствами. Фантазия код, который показывает, что я пытаюсь сделать:манипулировать файлом .svg с помощью javascript

<img src="pic.svg" id="pic"/> 
$('#pic').rotate('90') 
$('#pic').scale('200%') 
$('#pic').move(x, y)

Я знаю, что вы можете управлять DOM элементами, как это с помощью JavaScript, но будет ли изображение SVG масштабироваться без искажений? Кроме того, я думаю, что SVG имеет другие фантастические преобразования, которые javascript обычно не поддерживает. В идеале я тоже хотел бы использовать их.

источник

2014-02-12 stackOverlord

Преобразования в SVG - чрезвычайно важная точка входа для начала внедрения SVG в его DOM ... Да, преобразования полностью поддерживаются без искажений. –

* «Есть ли библиотека javascript, которая позволяет мне это делать?» * - http://raphaeljs.com/ – Phil

@Phil Rapahel не подходит для манипулирования существующей графикой SVG, вам придется генерировать графику с помощью Raphael , Я бы предпочел предложить [Snap.svg] (http://snapsvg.io/) или [Vanilla JS] (http://vanilla-js.com/). –

Если вы используете графику SVG с <img>, вы сможете делать то же самое, что и с любым другим форматом изображения - не больше и не меньше. (Единственное преимущество может заключаться в том, что вы можете изменять ширину и высоту без потери четкости.)

Если вы хотите преобразовать или иным образом изменить какие-либо элементы самого SVG, рекомендуется сделать SVG встроенным. Может быть, this answer помогает. Если ваш SVG был создан Illustrator, очистка SVG может резко уменьшить размер файла и сделать его более удобным для манипулирования JavaScript.

Если вы придерживаетесь <img>, вы все равно можете использовать CSS3 transforms (см. the specs за исчерпывающее описание).

источник

2014-02-12 06:34:10

Я не знал, что вы можете просто вставить svg в html. Благодарю. Я сделал скрипку, чтобы попытаться переместить svg с помощью svg.js: http://jsfiddle.net/b58M5/, но по какой-то причине это не сработает. Говорит «Неожиданный токен НЕЗАКОННЫЙ». Есть идеи? – stackOverlord

Что именно вы пытаетесь достичь? Вы хотите перемещать весь образ вокруг? Чем вы можете использовать элемент '', а не встроенный SVG, сделайте его «position: absolute» и поместите его с свойствами 'left' и' top' CSS. Никаких специальных материалов SVG не требуется. Вы хотите, чтобы движение было анимировано? –

Я пытаюсь сделать анимированную игру. Скрипка - всего лишь пример игрушки, чтобы увидеть, будет ли библиотека svg работать на мобильном устройстве. Я буду получать иллюстрации от художника, который выводит svg, и я буду анимировать и заполнять компоненты самостоятельно. – stackOverlord

манипулировать файлом .svg с помощью javascript

ответ

Смежные вопросы