linearGradient显示在一种颜色

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

来源

2012-01-10 nkare

哪个浏览器不适合你？ – Blazemonger 2012-01-10 20:30:18

firefox和chrome – nkare 2012-01-10 20:35:26

你可以提交一个jsfiddle的例子吗？会容易得多。 – bennedich 2012-01-10 21:00:02

这里的问题，据我所知，是的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显示在一种颜色

回答

相关问题