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