Анимация svg с css

Мне нужно с помощью css использовать SVG, но я не хочу вставлять весь код SVG на страницу.Анимация svg с css

После того, как мы рассмотрели способы включения моего SVG на странице и все еще были в состоянии оживить его, единственный способ, которым я мог обнаружить, что не вставлять данные svg raw, - это использовать объект, но любой css, который анимировал svg, необходимо для включения в теги стиля или связанных с ним из файла svg. Это был не вариант для меня.

Затем я посмотрел на застёжкой, которая работала хорошо, но потом я обнаружил, что могу просто загрузить внешний файл с помощью JQuery и анимации с помощью CSS:

$('.mysvg').load('path/to/my-svg.svg');

Мой вопрос, есть ли какие-либо ограничения или вещи я должен не обращай внимания на это так? Я пропустил что-то очевидное, я не видел примеров такого, когда читал бесчисленные сообщения в блоге о svg-анимации.

источник

2015-08-29 panthro

Это зависит от типа анимации css. Вы можете проверить поддержку браузера по любой конкретной вещи, которую хотите сделать, если css3, поскольку реализации в настоящее время несовместимы. Вы теряете тонкое зерно контроля, а не Snap, но вам может и не понадобиться. Это также может зависеть, если у вас есть взаимодействия с мышью, тогда такие вещи, как css transforms, могут нуждаться в дополнительной мысли. В принципе, потребуется дополнительная информация, чтобы узнать, есть ли какие-либо недостатки в вашем случае. – Ian

Я просто использую простые преобразования, такие как: transform: translateY (20%); \t Так что мне не нужно использовать привязку тогда? Просто используйте jquery для загрузки изображения, а затем используйте css для анимации? – panthro

Я не могу вспомнить, может ли jquery анимировать css на svg, в противном случае может быть jquerysvg. Основное преобразование должно быть в порядке, если вам нужно что-то вроде трансформационного происхождения для таких вещей, как вращения, вы можете найти несоответствия. – Ian

Вы все равно сможете аниматировать SVG с любыми функциями CSS3, такими как transition или animation. <svg> обрабатывается так же, как и обычные элементы DOM, если у них есть соответствующие классы, и у них нет никаких атрибутов style, которые могут переопределить CSS, вы должны быть хорошими. Там хорошая презентация here, которая рассказывает о встроенных стилях и о том, что нужно искать.

Также, касаясь вашего первого момента, вы можете технически сделать это, но в идеале единственной реальной выгодой является очистка вашего HTML, чтобы вы его не видели. Для этого вам нужно дождаться загрузки JavaScript и контейнера, который будет находиться в DOM, прежде чем он сможет загрузить ваш SVG. Вы можете встроить свой SVG, но, как вы сказали, вы этого не хотите. Вот почему люди используют PHP, который на стороне сервера, а оттуда они могут делать такие вещи, как

<div class="mysvg"> 
    <?php include_once("path/to/my-svg.svg") ?> 
</div>

, так что, как он все еще распределили, но он не загружается динамически клиентом.

Чувствительно ставить SVG прямо в ваш HTML-код, но я бы сказал, что это одна из самых удивительных вещей о SVG.

источник

2015-08-29 18:10:51 aug

Неужели другое преимущество - кеширование изображения? Использование кодированной строки не будет кэшировать? – panthro

@panthro это не образ, хотя и это важное различие. - когда вы используете функцию 'load', вы вставляете ее, как если бы это был код. Прямо из [документации] (http://api.jquery.com/load/) - _ Загружать данные с сервера и помещать возвращенный HTML в сопоставленный элемент_. – aug

ответ

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