下面是一个交互式示例，尝试将 setStops 实现为径向渐变。单击“setStops”按钮时出现错误消息:“setStops 不是函数”
我使用得正确吗？
<!DOCTYPE HTML>
<html>
<head>
<title>Snap.svg setStops</title>
<script type="text/javascript" src="http://svgDiscovery.com/_SNP/snap.svg-min.js"></script>
</head>
<body>
<svg id=mySVG width=400 height=200></svg>
<br><button onClick=stopsSet()>setStops</button>
<script>
var SNPsvg = Snap("#mySVG");
var radialGradient = SNPsvg.gradient("r(.5,.5,.5,.5)#000-#f00-#fff-green");
var circle = SNPsvg.circle(200,100,50).attr({fill: radialGradient});
//---button---
function stopsSet()
{
radialGradient.setStops("#fff-#000-#f00-#fc0");
circle.attr({fill: radialGradient});
}
</script>
</body>
</html>最佳答案
似乎是 snap.svg 中的错误。 LinearGradient 的代码如下所示:
function gradientLinear(defs, x1, y1, x2, y2) {
var el = Snap._.make("linearGradient", defs);
el.stops = Gstops;
el.addStop = GaddStop;
el.getBBox = GgetBBox;
el.setStops = GsetStops;
但对于 RadialGradients 来说是这样的:
function gradientRadial(defs, cx, cy, r, fx, fy) {
var el = Snap._.make("radialGradient", defs);
el.stops = Gstops;
el.addStop = GaddStop;
el.getBBox = GgetBBox;
if (cx != null) {
缺少添加 setStops 函数的代码。
我创建了一个 pull request in Snap.svg为了解决这个问题，希望维护者之一能够将其合并并将其包含在后续版本中。同时，您始终可以对 Snap 的本地副本进行相同的更改。
关于javascript - Snap.svg setStops 导致错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43264760/