Snap.svg setStops 导致错误

Question

下面是一个尝试将 setStops 实现为径向渐变的交互式示例。单击 'setStops' 按钮时出现错误消息："setStops is not a function"

我使用正确吗？

<!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（不确定这是否是设计使然）。

如果你尝试 gradient("L(0, 0, 100, 100)#000-#f00:25-#fff") 我认为错误会消失。当然，这可能不是您想要的，但我只是在解释为什么我认为错误就在那里。

如果遇到问题，您可以随时使用 Snap 做的一件事是，如果不直接支持它，请使用一些您自己的标记，然后将其添加进去。例如 Snap.parse('Some SVG Markup')

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 导致错误

Snap.svg setStops causing error

javascript

svg

snap.svg