linearGradientが1つの色で表示されます

このコードで間違っている点を教えてもらえますか？linearGradientが1つの色で表示されます

HTML：

<!DOCTYPE html > 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
</head> 

<script type="text/javascript" src="js/jquery-1.7.1.js"></script> 
<style type="text/css">@import "js/jquery.svg/jquery.svg.css";</style> 
<script type="text/javascript" src="js/jquery.svg/jquery.svg.js"></script> 
<script type="text/javascript" src="js/svg.js"></script> 

<body> 
    <div id="svgintro" style="height:800px"></div> 
</body> 
</html>

はJavaScript：

var defs=svg.defs(); 
svg.linearGradient(defs, 'gradient', [[0, 'white', 1], [1, 'red', 1]], 0, 0, 0, 100, {gradientUnits: 'userSpaceOnUse'}); 
svg.rect(20, 400, 1500, 40, 10, 10, {fill:'url(#gradient)'});

それは、常に1つの色を示しています。

ありがとうございます。

ソリューション：

svg.linearGradient(defs, 'gradient', [['0%', 'white'], ['100%', 'red']], 20, 400, 20, 440, {gradientUnits: 'userSpaceOnUse'});

出典

2012-01-10 nkare

どのブラウザが失敗しますか？ – Blazemonger

firefoxとchromeの両方 – nkare

jsfiddleのサンプルを提出できますか？はるかに簡単だろう。 – bennedich

ここでの問題は、私の知る限り、あなたが適用しているオブジェクトに対するない、linearGradientのx1, y1, x2, y2属性が絶対座標であるということです〜への勾配。勾配はy:100で終了しますが、矩形の上部はy:400になります。したがって、グラデーションの赤い部分のみが適用されます。

例としてhttp://jsfiddle.net/nrabinowitz/VTKj2/1/を参照してください。これは、上端がy:20の矩形に勾配が適切に適用されていることを示しています。

出典

2012-01-10 21:38:34 nrabinowitz

linearGradientが1つの色で表示されます

答えて

関連する問題