Переход SVG градиента цвета останавливается при наведении курсора

Итак, у меня есть CodePen: https://codepen.io/naregjan/pen/MBzQWp

В нем у меня есть четыре прямоугольника внутри кадра SVG, и два из них имеют градиенты. Я хочу изменить стоп-цвета для градиентов при наведении, аналогично эта ручка.

Соответствующий CSS:

.red{
  fill: url(#grad1);
}
.red ~ defs stop{
  transition: 1s;
}
.red:hover ~ defs stop:first-child {
  stop-color: #ffbbcc;
}
.red:hover ~ defs stop:last-child {
  stop-color: #0000ff;
}

И соответствующий HTML (квадраты генерируются с помощью JS; это с помощью Chrome Inspector):

<svg id = "sqSVG" width = "500" height = "500">
  <rect class = "square green" x = "135" y = "135" width = "100" height = "100"></rect>
  <rect class = "square green" x = "10" y = "135" width = "100" height = "100"></rect
  <rect class = "square red" x = "135" y = "10" width = "100" height = "100"></rect>
  <rect class = "square red" x = "10" y = "10" width = "100" height = "100"></rect>
  <defs>
    <linearGradient id = "grad1" x1 = "0%" y1 = "0%" x2 = "110%" y2 = "110%">
      <stop offset = "0%" style = "stop-color:#ff0000"></stop>
      <stop offset = "100%" style = "stop-color:#ffffff"></stop>
    </linearGradient>
  </defs>
</svg>

Я не могу понять, что случилось. Он не просто не анимируется, он вообще не меняет цвет остановки при наведении, и я не могу понять, чем отличается от приведенного мной примера. Rects создаются до defs, и у них есть родительский элемент, поэтому селектор должен работать ... что мне не хватает?

Если это актуально, вот моя функция создания квадратов:

function makeSquares(){
  var svg = document.querySelector("#sqSVG");

  var squares = [
    {x : "10", y : "10", color: "red"},
    {x : "135", y : "10", color: "red"},
    {x : "10", y : "135", color: "green"},
    {x : "135", y : "135", color: "green"}
  ];

  squares.forEach(sq => {
    var newSq = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
    newSq.setAttribute("class", "square " + sq.color);
    newSq.setAttribute("x", sq.x);
    newSq.setAttribute("y", sq.y);
    newSq.setAttribute("width", "100");
    newSq.setAttribute("height", "100");
    svg.prepend(newSq);
  });
}

... но я не думаю, что это так, потому что он также не будет работать, если он жестко закодирован в HTML. Помощь?

Атрибут style имеет большее значение, чем ваше правило CSS. Может быть, вы хотите вместо этого использовать атрибут stop-color? codepen.io/anon/pen/RBqyyY

Kaiido 09.08.2018 08:00

Времени на поиски обманщика не хватает, но я уверен, что он где-то там ...

Kaiido 09.08.2018 08:09

пойти на! важно

Matěj Štágl 09.08.2018 08:24

Избегайте использования !important, если у вас нет возможности изменять SVG. Все, что нужно сделать OP, это то, что сказал Кайидо.

Paul LeBeau 09.08.2018 12:16
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
4
684
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как сказал @Kaiido, вам мешают, потому что атрибуты style переопределяют CSS. Значит, ваши правила наведения не возымели эффекта.

Исправление состоит в том, чтобы изменить их на атрибуты. Изменять

style = "stop-color:#ffffff"

к

stop-color = "#ffffff"

Вдобавок у вас была опечатка. </rect должен быть </rect> во втором прямоугольнике.

.red{
  fill: url(#grad1);
}
.red ~ defs stop{
  transition: 1s;
}
.red:hover ~ defs stop:first-child {
  stop-color: #ffbbcc;
}
.red:hover ~ defs stop:last-child {
  stop-color: #0000ff;
}
<svg id = "sqSVG" width = "500" height = "500">
  <rect class = "square green" x = "135" y = "135" width = "100" height = "100"></rect>
  <rect class = "square green" x = "10" y = "135" width = "100" height = "100"></rect>
  <rect class = "square red" x = "135" y = "10" width = "100" height = "100"></rect>
  <rect class = "square red" x = "10" y = "10" width = "100" height = "100"></rect>
  <defs>
    <linearGradient id = "grad1" x1 = "0%" y1 = "0%" x2 = "110%" y2 = "110%">
      <stop offset = "0%" stop-color = "#ff0000"></stop>
      <stop offset = "100%" stop-color = "#ffffff"></stop>
    </linearGradient>
  </defs>
</svg>

Спасибо! Я пытался понять, как принять их комментарий - есть ли какой-нибудь способ сделать это, кроме как просто написать ответ самому и указать на них?

naregjan 09.08.2018 19:45

Нет. Все, что вы действительно можете сделать, это проголосовать за их комментарий, как и я. Я бы предпочел, чтобы Кайидо получил баллы, но иногда у людей нет времени написать полный ответ.

Paul LeBeau 09.08.2018 20:19

Другие вопросы по теме