对齐.svg设置停止导致错误

下面是一个交互式示例，尝试将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;

但对于径向渐变，它是这样的：

    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 函数的代码。

我在 Snap 中创建了一个拉取请求.svg来解决这个问题，所以希望其中一位维护者能够合并它并将其包含在后续版本中。同时，您始终可以对 Snap 的本地副本进行相同的更改。

我认为这是因为

setStops仅适用于linearGradient，而不适用于radialGradient(不确定这是否是设计使然(。

如果您尝试梯度("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});

例子 jsfiddle

相关内容

最新更新

热门标签：