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顯示在一種顏色

回答

相關問題