Итак, у меня есть 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. Помощь?
Времени на поиски обманщика не хватает, но я уверен, что он где-то там ...
пойти на! важно
Избегайте использования !important
, если у вас нет возможности изменять SVG. Все, что нужно сделать OP, это то, что сказал Кайидо.
Как сказал @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>
Спасибо! Я пытался понять, как принять их комментарий - есть ли какой-нибудь способ сделать это, кроме как просто написать ответ самому и указать на них?
Нет. Все, что вы действительно можете сделать, это проголосовать за их комментарий, как и я. Я бы предпочел, чтобы Кайидо получил баллы, но иногда у людей нет времени написать полный ответ.
Атрибут
style
имеет большее значение, чем ваше правило CSS. Может быть, вы хотите вместо этого использовать атрибутstop-color
? codepen.io/anon/pen/RBqyyY