Home/ Questions/Q 7065289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:56:18+00:00

Can someone point me what is wrong in this code ? Html: <!DOCTYPE html

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem here, as far as I can tell, is that the x1, y1, x2, y2 attributes of linearGradient are in absolute coordinates, not relative to the object you’re applying the gradient to. So your gradient ends at y:100 but the top of your rectangle is at y: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:20 has the gradient properly applied.

    • 0