Question

下面是一个尝试将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>

Answer 1

我认为这是因为setStops仅适用于linearGradient而不是radialGradient（不确定是否符合设计）。

如果你尝试渐变（“L（0,0,100,100）＃000-＃f00：25- #ffff”）我认为错误会消失。当然，这可能不是你想要的，但我只是解释为什么我认为错误存在。

如果你遇到困难，你可以随时使用Snap做的一件事就是使用你自己的标记，如果不直接支持它，并加入它。例如Snap.parse（'一些SVG标记'）

var svgMarkup = Snap.parse('<defs><radialGradient id="exampleGradient"><stop offset="10%" stop-color="gold"/><stop offset="95%" stop-color="green"/></radialGradient></defs>');

SNPsvg.append( svgMarkup );

var radialGradient = SNPsvg.select('#exampleGradient')

var circle = SNPsvg.circle(200,100,50).attr({fill: radialGradient});

Example jsfiddle

Answer 2

似乎是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的本地副本进行相同的更改。

Snap.svg setStops导致错误

2 个答案: