Как вставить svg в after
Есть ли способ использовать SVG в качестве контента в псевдоэлементе: before или: after
Я хочу разместить изображения SVG перед выбранными элементами. Я использую jQuery, но это не имеет значения.
Я хотел бы, чтобы :before элемент был как:
Если я сделаю это, как показано выше, он просто отобразит строку. Я проверил спецификации и, кажется, есть некоторые ограничения на содержание. Есть ли способ обойти это ограничение? Только содержание css относится к моему вопросу.
Да, ты можешь! Только что проверил, и это прекрасно работает, это потрясающе! Он все еще не работает с HTML, но он работает с SVG.
В моем index.html у меня есть:
И мой test.svg выглядит так:
Да. Вы можете добавить SVG как фоновое изображение пустого: after или: before. Ну вот:
убедитесь, что ваш svg не содержит двойных кавычек и uriencode любых символов #.
Использование CSS-спрайтов и данных URI дает дополнительные интересные преимущества, такие как быстрая загрузка и меньше запросов, и мы получаем поддержку IE8 с помощью image / base64:
Для IE8 измените на это:
Удобный инструмент для SVG-кодирования url-encoder
Будьте осторожны, все остальные ответы имеют некоторые проблемы в IE.
Решение состоит в том, чтобы установить размер перед элементом и оставить его там, где он есть:
В background-image + background-size решениях работают хорошо, но немного неудобно, так как вы должны указать те же размеры в два раза.
Результат в IE11:
Для продолжения этой темы. Если вы хотите добавить иконки Font Awesome 5, вам нужно добавить немного CSS.
Есть ли способ использовать SVG в качестве контента в псевдо-элементе: до или после
Я хочу разместить некоторые изображения SVG перед некоторыми выбранными элементами. Я использую JQuery, но это не имеет значения. Я хотел бы иметь: перед элементом, чтобы быть как:
Если я делаю это, как показано выше, он просто отображает строку. Я проверил спецификации, и, похоже, есть некоторые ограничения на то, какой контент может быть. Есть ли обойти это ограничение? Только содержание css имеет отношение к моему вопросу.
6 ответов:
к сожалению, нет, спец говорит на content свойство поддерживает только сгенерированный текстовый контент, никаких html, svg-файлов или тегов вообще.
Да, вы можете! Просто протестировал это, и он отлично работает, это потрясающе! Он по-прежнему не работает с html, но он работает с svg.
в мой индекс.html у меня есть:
и мой тест.svg выглядит так:
да. Вы можете добавить SVG в качестве фонового изображения пустого :after или: before. Здесь вы идете:
убедитесь, что ваш svg не содержит двойных кавычек, и uriencode любые # символы.
использование CSS спрайтов и uri данных дает дополнительные интересные преимущества, такие как быстрая загрузка и меньше запросов, и мы получаем поддержку IE8 с помощью image/base64:
для IE8, измените на это:
будьте осторожны, все остальные ответы есть некоторые проблемы в IE.
решение состоит в том, чтобы установить размер перед элементом и оставить его там, где он есть:
The background-image + background-size решения работают также, но немного неудобно, так как вы должны укажите одинаковые размеры дважды.
Гайд: как создать SVG анимацию с помощью After Effects CC
У вас есть одна или две иконки, которые вы бы хотели оживить с помощью анимации. С чего бы вы начали? Допустим, у вас есть файлы SVG, программы Illustrator CC и After Effects CC, но, решение ускользает от вас.
В этой статье я собираюсь продемонстрировать, как можно легко анимировать SVG-файл, включая подготовку SVG-файла в Illustrator и импорт в After Effects CC. Также объясню, как можно конвертировать его в Shape Layers и добавлять движения. И, наконец, поговорим об экспортировании и рендеринге.
Конечный результат работы.
Теперь давайте приступим к самой интересной части – научимся оживлять изображения.
Подготовка SVG-файла в Illustrator
Давайте начнем с открытия вашего SVG-файла в Adobe Illustrator CC. Я буду анимировать маленькую автомобильную иконку, которая доступна бесплатно на Week Of Icons.
После открытия файла нам нужно разгруппировать и разделить все объекты на слои. Вы можете сделать это вручную или использовать Release to Layers (Sequence) для ускорения процесса. Прежде чем импортировать файл в After Effects, нам нужно сохранить его в формате файла Illustrator.
Разгруппировать объекты мы можем используя Release to Layers (Sequence), чтобы не тратить драгоценное время.
Импорт и организация файла в After Effects CC
Теперь все готово для импорта в After Effects CC. Давайте используем сочетание клавиш Ctrl+I (Windows) или Command+I (Mac), чтобы загрузить диалоговое окно Import File, или перейдите к File > Import > File… Там же выберите подготовленный нами файл Illustrator CC и нажмите Import. Должно появиться небольшое диалоговое окно с названием выбранного файла. Выберите Composition из выпадающего списка под названием Import Kind.
Более быстрый способ импортирования файла – дважды кликнуть на место столбца на проектной панели.
На панели Timeline Panel мы увидим новую композицию. Дважды кликаем на нее. Теперь мы должны увидеть слои Illustrator CC с оранжевыми значками слева от названий.
Прежде чем приступить к делу, мы должны преобразовать все эти слои в Shape Layers. Нам нужно выделить их все с помощью Ctrl+A/Command+A, или вручную с помощью Shift + Left Mouse. После этого щелкните правой кнопкой мыши на слой и выберите Create > Create Shapes from Vector Layer.
Теперь, когда новые слои выделены, перетащите их на верхнюю часть панели над слоями Illustrator CC, а затем удалите слои Illustrator CC, чтобы они не мешали.
Конвертирование слоев Illustrator CC в Shape Layers в программе After Effects CC
Хотя в этом нет необходимости, важно, чтобы мы дали каждому слою соответствующее имя и/или обозначили его цветом. Это позволит нам работать более эффективно, поскольку мы будем сосредоточены на ключевых кадрах. В приведенном ниже примере цвета надписей более или менее соответствуют заливке соответствующих им слоев.
Маркировать Shape Layers соответствующими названиями, цветами, надписями и расположением очень практично.
Для настройки параметров используйте сочетание клавиш Ctrl+K/Command+K или Composition > Composition Settings… Из Composition Settings нам нужно выбрать ширину, высоту, частоту кадров и длительность (Width, Height, Frame Rate, и Duration). Для этого проекта я выбрал 60 кадров в секунду, чтобы анимация была плавной.
На данный момент кажется, что все готово к работе, но есть еще одна вещь, которую нужно сделать. Нам нужно сгруппировать определенные слои вместе, чтобы их движения были синхронизированы с основным слоем, который мы можем контролировать. Этот метод называется Parenting.
Используйте Pick Whip, чтобы назначить родительский слой нескольким слоям.
В нашем примере я назначил менее значимые слои (дочерние слои), такие как лобовое стекло, детали кузова, дерево и веревки первичному слою кузова (родительскому слою). Это позволило мне контролировать положение и вращение всего автомобиля (за исключением колес) с помощью родительского слоя.
Создание анимации
Я хотел, чтобы машина наехала на камень и немного зависла в воздухе. Также я хотел, чтобы елка двигалась вверх-вниз, и открылся багажник. Я начал с создания камня, машины и колес. Затем пришло время преодолеть самое большое препятствие – наложить действие на елку. Закончив это, я занялся мелкими деталями, такими как багажник и веревки.
Первым делом нужно было сделать элемент или слой в виде камня, но вместо того чтобы вернуться в Illustrator CC для добавления другого слоя, я просто использовал инструмент Pen Tool в After Effects CC. Это позволило мне быстро спроектировать маленький камень.
О, могущественный Pen Tool!
Багажник был относительно простой задачей. Я установил его сзади машины и сделал опорную точку в нижней левой вершине. Используя Pick Whip, я назначил его родительскому слою кузова. Предпоследним шагом было придание эффекта вращения, который в свою очередь сделал момент подпрыгивания машины более реалистичным.
Посмотрите, как настроены, слои кузова и багажника по отдельности. Обратите внимание на то, как багажник прикреплен к кузову.
Все остальное делалось аналогичным образом: ключевые кадры создавались до тех пор, пока они не выглядели реалистично. На это требовалось некоторое время, я просматривал анимацию на разных скоростях с помощью предварительного просмотра.
Экспорт анимации
К этому моменту вы стремитесь показать свои работы (в данном случае, анимированные иконки) миру. Но как вы экспортируете свою анимацию для всеобщего обозрения? Есть несколько способов сделать это, но предположим, что вы хотите вернуться к формату масштабируемой векторной графики (SVG). Другими словами, вы хотите, чтобы на вашем сайте была анимированная иконка, которая выглядит безупречной и четкой независимо от размера. Решение – расширение After Effects CC под названием Bodymovin в сочетании с мобильной библиотекой Lottie.
P.S. Здесь вы можете найти мои файлы Illustrator CC и After Effects CC.
Набор иконок доступен для скачивания бесплатно на Week Of Icons freebie.
Is there a way to use SVG as content in a pseudo element ::before or ::after
I want to place some SVG images before some selected elements. I am using jQuery but that is irrelevant.
I would like to have the ::before element to be as:
If I do it as shown above, it just display the string. I checked the specs and there seems to be some restrictions on what content can be. Is there a work around to this restriction? Only CSS content is relevant to my question.
10 Answers 10
Yes you can! Just tested this and it works great, this is awesome! It still doesn’t work with html, but it does with svg.
In my index.html I have:
And my test.svg looks like this:
You can use the url() CSS function.
Make sure your SVG doesn’t contain any # symbols.
Convenient tool for SVG encoding url-encoder
Making use of CSS sprites and data uri gives extra interesting benefits like fast loading and less requests AND we get IE8 support by using image/base64:
For IE8, change to this:
To extend further this topic. In case you want to add Font Awesome 5 icons you need to add some extra CSS.
Be careful all of the other answers have some problem in IE.
Solution is to set size to before element and leave it where it is:
The background-image + background-size solutions works as well, but is little unhandy, since you have to specify the same sizes twice.
The result in IE11:
Although this was many years ago, I’d like to also share this.
The answers above are correct, you can directly attach the encoded svg string into the css content property. For those having any issues with the URL it may be due to spaces and characters not valid for such, in that case paste your decoded SVG code into: https://mothereff.in/url
Use the encoded SVG URL and it should work fine. Incorrect & Correct Examples:
This article has a simpler method for inserting the SVG as content. It uses a zoom property to get size adjustment for the image.
Not the answer you’re looking for? Browse other questions tagged css svg pseudo-element or ask your own question.
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.12.16.41042
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
How to import SVG file into After Effects
I am trying to import an SVG animated file to an After Effects project.
It is not importing right now, so are there any solutions or any alternate ways to do that?
3 Answers 3
Open in Illustrator.
Mind with the ‘Import Kind’ upon importing, suggest ‘Composition’ if you sorted the graphics into numbers of layers.
Also be aware when you import them they might look blurry when transforming. In order to scale properly:
Right-click the layer and hit Create > Create Shapes From Vector Layer
Not the answer you’re looking for? Browse other questions tagged after-effects or ask your own question.
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.12.16.41042
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.