Переменные CSS не работают с несколькими SVG-градиентами - PullRequest
Новая
       14

Переменные CSS не работают с несколькими SVG-градиентами

0 голосов
/ 22 сентября 2018

У меня есть некоторый jquery, который добавляет SVG к любому div с классом .fade-top-onbottom, а затем использует CSS-переменные для стилизации SVG-градиентов.Переменные css работают на первом SVG на странице, но не на других.

Это связано с #fadeDown в linearGradient.Если я установил уникальный #, он работает (что имеет смысл).

Как я могу заставить jQuery вставлять уникальный идентификатор для каждого добавляемого градиента? 

$(".fade-top-onbottom").append("<div class='dh-bottom-divider-fade-top'><svg width='100%' height='100%' viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='fadeDown' x1='0' x2='0' y1='0' y2='1'><stop offset='0%' stop-color='var(--bottom-divider-color, #999)'/><stop offset='100%' stop-color='var(--bottom-divider-color, #999)' stop-opacity='0'/></linearGradient></defs><path d='M 0 0 L 0 140 L 1280 140 L 1280 0 Z' fill='url(#fadeDown)'/></svg></div>");
body {
  background:#000;
  height:100%;
  width:100%;
}

.yellow {
  --bottom-divider-color:yellow;
}
.red {
  --bottom-divider-color:red;
}
.blue {
  --bottom-divider-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='fade-top-onbottom yellow'></div>
<div class='fade-top-onbottom red'></div>
<div class='fade-top-onbottom blue'></div>

1 Ответ

0 голосов
/ 22 сентября 2018

Вы можете зациклить элементы и добавить индекс для каждого id. 

var gradients = $(".fade-top-onbottom");

gradients.each(function(index) {
	$(this).append("<div class='dh-bottom-divider-fade-top'><svg width='100%' height='100%' viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='fadeDown" + index + "' x1='0' x2='0' y1='0' y2='1'><stop offset='0%' stop-color='var(--bottom-divider-color, #999)'/><stop offset='100%' stop-color='var(--bottom-divider-color, #999)' stop-opacity='0'/></linearGradient></defs><path d='M 0 0 L 0 140 L 1280 140 L 1280 0 Z' fill='url(#fadeDown" + index + ")'/></svg></div>");
});
body {
  background:#000;
}

.yellow {
  --bottom-divider-color:yellow;
}
.red {
  --bottom-divider-color:red;
}
.blue {
  --bottom-divider-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='fade-top-onbottom yellow'></div>
<div class='fade-top-onbottom red'></div>
<div class='fade-top-onbottom blue'></div>
...