Snap.svg setStopsエラーの原因

以下は、setStopsを放射状のグラデーションに実装しようとするインタラクティブな例です。「setStops」ボタンをクリックすると、「setStopsは関数ではありません」というエラーメッセージが表示されます。Snap.svg 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>

出典

2017-04-06 Francis Hemsher

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を作成しましたので、メンテナの1人がそれをマージして次のリリースに組み込むことを願っています。その間、スナップのローカルコピーに対して常に同じ変更を加えることができます。

出典

2017-04-07 07:00:57

プルリクエストをありがとう...私もそれをやろうと考えていました。私はSnap.svgパッケージが本当に好きで、それが進化し続けることを願っています。 –

私はsetStopsがてLinearGradientなくradialGradient（つまり、設計やないでかどうかわからない）のためにのみ利用可能ですので、それはだと思います。

グラデーション（ "L（0、0、100、100）＃000-＃f00：25-＃fff"）を試してみると、エラーは消えてしまいます。もちろん、それはおそらくあなたが望むものではありませんが、なぜ私はそのエラーが存在するのかを説明しています。あなたが動けなくなる場合は、必ずスナップで行うことができます

ことの一つは、それが直接サポートされていない場合は、独自のマークアップのビットを使用して、それを追加します。例：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

出典

2017-04-06 22:36:54 Ian

はい、解析は、要素を動的に作成する効率的な方法です...ありがとうございます。 –

Snap.svg setStopsエラーの原因

答えて

関連する問題