Javascript 线性渐变以一种颜色显示_Javascript_Jquery_Svg_Jquery Svg

Javascript 线性渐变以一种颜色显示

javascript jquery svg

Javascript 线性渐变以一种颜色显示,javascript,jquery,svg,jquery-svg,Javascript,Jquery,Svg,Jquery Svg,有人能告诉我这个代码有什么问题吗 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="

有人能告诉我这个代码有什么问题吗

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>

它总是显示一种颜色

多谢各位

解决方案：

据我所知，这里的问题是

linearGradient

的

x1，y1，x2，y2

属性位于绝对坐标中，而不是相对于要应用渐变的对象。因此，渐变结束于

y:100

，但矩形顶部位于

y:400

，因此它只应用渐变的红色部分

请参见示例，显示顶部位于y:20的矩形正确应用了渐变。

您可以提交一个JSFIDLE示例吗？一开始我试图在JSFIDLE中发布一个示例，因为我使用了一个jQuerySVG插件，但无法在那里发布。然而，我已经编辑了我的原始问题，以包括html以及。谢谢你：

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