@AllReady

Как сохранить слои в SVG image > path?

Добрый день. Скажу сразу, с SVG работал очень мало, AI открываю впервые, работал в основном с иконками svg и просто отображением их на сайте. Возникла проблема с сохранением файла. Необходимо сделать выбор квартир, как на многих сайтах жилищных комплексов. Есть макет в PSD, на нем, раннее вырезали объекты и сохранили как отдельные слои, чтобы при наведении на них - они выделялись.
Когда открываю макет в AI, хочу экспортировать в SVG. Только вот проблема в том, что слои которые вырезали - сохраняются с тегом image. А для данного тега, свойства типа fill не действуют. Подскажите пожалуйста, можно ли сохранить так, чтобы слои были элементами path ?
  • Вопрос задан
  • 2441 просмотр
Пригласить эксперта
Ответы на вопрос 2
daaner
@daaner
Человек, как человек
В таких случайх не достаточно иллюстратора. Сохрани каждый слой отдельным SVG. Потом открой все текстовым редактором и патчи перенеси в группы (каждую группу под свой ID). Тогда прям к CSS сможешь делать fill любому ID

ну или прям в SVG допиши онХовер
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 100">
  <path fill="#f43da0"
	d="M35,0C15.669,0,0,15.715,0,35.101S35,100,35,100s35-45.513,35-64.899S54.33,0,35,0z M35,47.79
	c-6.988,0-12.653-5.681-12.653-12.688c0-7.008,5.665-12.688,12.653-12.688c6.987,0,12.651,5.681,12.651,12.688
	C47.651,42.108,41.987,47.79,35,47.79z">
    <animate fill="freeze" dur="0.1s" to="#3fc1c9" from="#f43da0" attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="#f43da0" from="#3fc1c9" attributeName="fill" begin="mouseout"/>
  </path>

  </svg>
Ответ написан
Комментировать
developerV
@developerV
Ну как я это делаю, может кто с этим столкнется.
Распишу по пунктам:
1)Сохраняем svg в обычном Photoshop5d6fc3db9042b923599995.png
2)Открываем файл в illustrator5d6fc3f487133358555465.png
3)5d6fc3feefd47372374429.png
4)Сохраняем как5d6fc4043653b051080196.png
5)Настройки5d6fc40d807fa663630163.png
6)Настройки5d6fc4132c770066434291.png
7)Удаляем стили, теперь можно использовать fill5d6fc418899ed201746894.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы