以一种颜色显示的 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'});
Can someone point me what is wrong in this code ?
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)'});
It always show one color.
Thank you.
Solution:
svg.linearGradient(defs, 'gradient', [['0%', 'white'], ['100%', 'red']], 20, 400, 20, 440, {gradientUnits: 'userSpaceOnUse'});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
据我所知，这里的问题是 LinearGradient 的 x1, y1, x2, y2 属性是绝对坐标，而不是相对于您的对象重新应用渐变。因此，您的渐变在
y:100结束，但矩形的顶部位于y:400，因此它只会应用渐变的红色部分。请参阅 http://jsfiddle.net/nrabinowitz/VTKj2/1/ 示例，显示顶部位于 y:20 的矩形已正确应用渐变。
The problem here, as far as I can tell, is that the
x1, y1, x2, y2attributes oflinearGradientare in absolute coordinates, not relative to the object you're applying the gradient to. So your gradient ends aty:100but the top of your rectangle is aty:400, so it only gets the red part of the gradient applied.See http://jsfiddle.net/nrabinowitz/VTKj2/1/ for an example, showing that a rectangle with the top at
y:20has the gradient properly applied.