以一种颜色显示的线性渐变答案

【问题标题】：linearGradient showing up in one color以一种颜色显示的线性渐变
【发布时间】：2012-02-07 06:10:36
【问题描述】：

有人能指出这段代码有什么问题吗？

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)'});

它总是显示一种颜色。

谢谢。

解决方案：

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

【问题讨论】：

你能提交一个 jsfiddle 例子吗？会容易得多。
最初我尝试在 jsfiddle 中发布一个示例，因为我使用了一个 jquery svg 插件，但我无法将它发布在那里。但是，我已经编辑了我的原始问题以包含 html。谢谢
小提琴为您服务：jsfiddle.net/nrabinowitz/VTKj2

标签： javascript jquery svg jquery-svg

【解决方案1】：

据我所知，这里的问题是linearGradient 的x1, y1, x2, y2 属性是绝对坐标，而不是相对于您应用渐变的对象。所以你的渐变在y:100结束，但你的矩形的顶部在y:400，所以它只应用了渐变的红色部分。

参见http://jsfiddle.net/nrabinowitz/VTKj2/1/ 示例，显示顶部位于y:20 的矩形已正确应用渐变。

【讨论】：