SVG Linear Gradient (D3)
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var w = 960, | |
| h = 500; | |
| var svg = d3.select("body").append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var gradient = svg.append("svg:defs") | |
| .append("svg:linearGradient") | |
| .attr("id", "gradient") | |
| .attr("x1", "0%") | |
| .attr("y1", "0%") | |
| .attr("x2", "100%") | |
| .attr("y2", "100%") | |
| .attr("spreadMethod", "pad"); | |
| gradient.append("svg:stop") | |
| .attr("offset", "0%") | |
| .attr("stop-color", "#0c0") | |
| .attr("stop-opacity", 1); | |
| gradient.append("svg:stop") | |
| .attr("offset", "100%") | |
| .attr("stop-color", "#c00") | |
| .attr("stop-opacity", 1); | |
| svg.append("svg:rect") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .style("fill", "url(#gradient)"); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment