用图案填充矩形

Question

我正在使用d3.js作为图表.在某些时候,我必须显示数据与图的一些特殊部分,例如,如果值跨越某个边界然后显示具有填充模式的部分.更清楚的是有和图像.

我得到越过边界的矩形部分,但我怎么能用这种模式填充它？任何CSS或画布技巧？

注意:这个图像只是一个不是真实的例子

Answer 1

这个怎么样:

Live Demo

JS

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

结果