CSS 变量不适用于多个 SVG 渐变
CSS variables not working on multiple SVG gradients
我有一些 jquery 使用 class .fade-top-onbottom
将 SVG 附加到任何 div,然后使用 CSS 变量来设置 SVG 渐变样式. css 变量适用于页面上的第一个 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>
您可以遍历元素并为每个元素添加索引 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>
我有一些 jquery 使用 class .fade-top-onbottom
将 SVG 附加到任何 div,然后使用 CSS 变量来设置 SVG 渐变样式. css 变量适用于页面上的第一个 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>
您可以遍历元素并为每个元素添加索引 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>