Задать вопрос
@resibe
19-летний пушистик
html

Как отзеркалить градиент svg?

Здравствуйте, я сделал такую svg
<!DOCTYPE html>
<html>
  <body>
    <svg
      xmlns="http://www.w3.org/2000/svg"


      width="50%"
      height="50%"
      viewBox="0 0 1 1"
    >
	<defs>
		<linearGradient id="l1" gradientTransform="rotate(90)">
		  <stop offset="0%"  stop-color="green" />
		  <stop offset="100%" stop-color="red" />
		</linearGradient>

		<linearGradient
		id="l2"
		xlink:href="#l1"
		gradientTransform="rotate(180)"
	  />
	  </defs>
      <rect x="0" y="0" width="0.5" height="0.5" fill="url(#l1)" />
	  <rect x="50%" y="50%" width="0.5" height="0.5" fill="url(#l2)" />
    </svg>
  </body>
</html>

Но градиент снизу не отзеркален относительно первого, как я могу это исправить
6194432f464fb941640863.png
  • Вопрос задан
  • 217 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 3
@Softlink
После поворота градиента его надо еще двигать через translate. В вашем случае еще можно применить transform-origin . Почитать про трансформы и координаты в свг градиентах.
Ответ написан
Комментировать
Комментировать
@mikeyuriev
Ответ написан
Комментировать
Комментировать
LenovoId
@LenovoId Куратор тега SVG
svg, css,js
Тут мы сделаем очень сложные манипулиции
Продублируем rect с градиентом и перевернём его ... то есть сделаем transform: scaleY(-1) ну и не забываем о transform-box - в итоге получим вот это : https://codepen.io/topicstarter/pen/KKvbeRQ

Видим что писанины мало что снижает объём ... то есть вес страницы
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
SemanticMoscow
@SemanticMoscow
извините за то, что поднимаю старую тему,
но мне кажется, тут всё сильно усложнили.
не нужны никакие ротации и трансформации.

градиент по определению имеет направление,
т.е. координаты начала и окончания действия.

а следовательно достаточно просто изменить это направление:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 1 1">
 <defs>
  <linearGradient id="l1" x1="50%" y1="0%" x2="50%" y2="100%">
	<stop offset="0%"  stop-color="green"/>
	<stop offset="100%" stop-color="red"/>
  </linearGradient>

  <linearGradient id="l2" xlink:href="#l1"
  x1="50%" y1="100%" x2="50%" y2="0%"/>
 </defs>
 <rect x="0" y="0" width="0.5" height="0.5" fill="url(#l1)"/>
 <rect x="50%" y="50%" width="0.5" height="0.5" fill="url(#l2)"/>
</svg>
с помощью этих координат можно начинать и заканчивать градиент где угодно,
применяя любые единицы измерения.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Ещё заказы