填充模式

本文介绍了填充模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用d3.js for graph。在某些时候，我不得不显示数据与图的一些特殊部分，例如如果值是跨越一些边界，然后显示填充模式的部分。更清楚的是有和图像。

I am using d3.js for graph. at some point i have to show data with some special part of graph for example if the values is cross some boundary then show that part with filling pattern. for more clear is there in and image.

我得到的跨越边界的rect部分，但我怎么能填充这个模式？ 任何CSS或画布技巧？

i get the rect part that cross the boundary but how can i fill it with this pattern? any css or canvas tricks?

注意：这张图片只是一个不是真正的例子。

Note : this image is just an example not the real one

推荐答案

这样做：

现场演示

JS b

var 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", 'yellow'); svg.append("rect") .attr("x", 0) .attr("width", 100) .attr("height", 100) .attr('fill', 'url(#diagonalHatch)');

结果