linearGradient以一种颜色显示
linearGradient showing up in one color
有人能指出这段代码中的错误吗?
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'});
据我所知,这里的问题是linearGradient
的x1, y1, x2, y2
属性处于绝对坐标中,而不是相对于应用渐变的对象。因此,渐变结束于y:100
,但矩形的顶部位于y:400
,因此它只应用渐变的红色部分。
请参阅http://jsfiddle.net/nrabinowitz/VTKj2/1/例如示出顶部位于y:20
的矩形具有适当应用的梯度。
相关文章:
- 如何获得一种颜色的rgb值'It’它接近另一种颜色
- 悬停时:用一种颜色突出显示维基百科的所有相同链接,用不同的颜色突出显示其他地方的所有相同的链接
- 查看整个画布是否被涂成一种颜色的方法.Javascript + processing.js
- 如何在 Javascript 中按百分比使颜色与另一种颜色相似
- 在此之后,我如何为另一种颜色制作动画
- 这个颜色选择器中的彩虹条在哪里?为什么可以'我只是点击一种颜色
- 使用HighCharts为Javascript中的每个值指定一种颜色
- 生成类似于一种颜色的可微分颜色
- jQuery.fadeOut淡出为一种颜色,然后消失
- 如何从另一种颜色中减去一种颜色
- linearGradient以一种颜色显示
- 是否有一种方法可以使用OpenLayers来改变openstreetmap中某些特征的颜色?
- 我需要为手风琴换一种颜色;我在一起工作
- 如何改变一个变量的颜色为另一种颜色与预定义的调色板与javascript
- 用另一种颜色替换图像/精灵中的特定颜色
- 从一种颜色平滑过渡到另一种颜色
- Google Maps JavaScript API -用一种颜色显示未激活的替代路由,用另一种颜色显示激活的替代路由
- 将一个数组的每个国家映射到另一个数组的每种颜色
- 有可能生成一种颜色吗
- 是否有一种方法可以改变特定文本的颜色