Question

我有一个jquery，它将SVG附加到类.fade-top-onbottom的任何div上，然后使用CSS变量设置SVG渐变的样式。 css变量可在页面上的第一个SVG上使用，而不能在其他SVG上使用。

这是由于linearGradient中的#fadeDown。如果我设置一个唯一的＃，它将起作用（这很有意义）。

我如何让jQuery为每个附加的渐变插入唯一的ID？

$(".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>

Answer 1

您可以遍历元素，并为每个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>

CSS变量不适用于多个SVG渐变

1 个答案: