Sometimes, we want to fill rectangle with pattern with JavaScript.
In this article, we’ll look at how to fill rectangle with pattern with JavaScript.
How to fill rectangle with pattern with JavaScript?
To fill rectangle with pattern with JavaScript, we can use d3.
For instance, we write:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"></script>
to add the d3 script.
Then we write:
const svg = d3.select("body").append("svg");
svg
.append('defs')
.append('pattern')
.attr('id', 'diagonalHatch')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 4)
.attr('height', 4)
.append('path')
.attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
.attr('stroke', '#000000')
.attr('stroke-width', 1);
svg.append("rect")
.attr("x", 0)
.attr("width", 100)
.attr("height", 100)
.style("fill", 'orange');
svg.append("rect")
.attr("x", 0)
.attr("width", 100)
.attr("height", 100)
.attr('fill', 'url(#diagonalHatch)');
to create an svg element and append it to the body as its child with
const svg = d3.select("body").append("svg");
Then we write
svg
.append('defs')
.append('pattern')
.attr('id', 'diagonalHatch')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 4)
.attr('height', 4)
.append('path')
.attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
.attr('stroke', '#000000')
.attr('stroke-width', 1);
to add the diagonal hatch pattern.
We add the width, height stroke, stroke-width, etc with attr.
We set the 'id' of the pattern so we can apply it later by referencing its ID.
Next, we add the rectangle with
svg.append("rect")
.attr("x", 0)
.attr("width", 100)
.attr("height", 100)
.style("fill", 'orange');
And we set width, height and fill of the rectangle with attr.
Finally, we append the diagonal hatch pattern we created with
svg.append("rect")
.attr("x", 0)
.attr("width", 100)
.attr("height", 100)
.attr('fill', 'url(#diagonalHatch)');
We call attr with 'fill' and 'url(#diagonalHatch)' to apply the diagonalHatch pattern we created earlier.
Conclusion
To fill rectangle with pattern with JavaScript, we can use d3.
