填充模式 [英] Fill rect with pattern

问题描述

我使用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)');

结果

这篇关于填充模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！