Question

我试图让图像填满我的圆环图，然后将图像从中心旋转60度。

我已经成功地使用这种方法将简单的形状填充为图案，但是当应用于圆环图时，图案图像变得非常复杂并重复。图像为300px x 300px - 与svg相同。 The final result should look like this

imgPath = "http://www.mikeespo.com/statDonkey/inner.png";
w = 300;
h = 300;

passingPercent = 60;
rotateStartPosition = 50;

var myScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);

//  MAKES SVG
var svg = d3.select("body")
  .append("svg")
  .attr("id", "svg_donut")
  .attr("width", w)
  .attr("height", h);

//  MAKE DEFS
var defs = d3.select("#svg_donut")
  .append("defs");

// MAKES PATTERN
defs.append('pattern')
  .attr('id', 'pic1')
  .attr('width', 300)
  .attr('height', 300)
  .attr('patternUnits', 'userSpaceOnUse')
  .append('svg:image')
  .attr('xlink:href', imgPath)
  .attr("width", 300)
  .attr("height", 300)
  .attr("transform", "rotate(60 150 150)")
  .attr("x", 0)
  .attr("y", 0);

//  CREATES VARIABLE *VIS* TO SVG
var vis = d3.select("#svg_donut");

//  DEFINES DONUT GRAPH
var arc = d3.svg.arc()
  .innerRadius(95)
  .outerRadius(140)
  .startAngle((myScale(0 + rotateStartPosition)))
  .endAngle((myScale(passingPercent + rotateStartPosition)));

//  APPENDS *VIS* TO SVG
vis.append("path")
  .attr("id", "passing")
  .attr("d", arc)
  .attr("fill", "white")
  .attr("transform", "translate(150,150)")
  .attr("fill", "url(#pic1)");

Answer 1

我不确定为什么这样做是诚实的，但是当我更改了pattern元素的宽度和高度并删除了patternUnits属性时，我能够实现所需的外观：

defs.append('pattern')
  .attr('id', 'pic1')
  .attr('width', 1)
  .attr('height', 1)
  .append('svg:image')
  .attr('xlink:href', imgPath)
  .attr("width", 300)
  .attr("height", 300)
  .attr("transform", "rotate(00 150 150)")
  .attr("x", 0)
  .attr("y", 0);

我完全不理解它，但它与坐标系以及模式缩放到您正在应用它的对象的方式有关。宽度和高度没有像您最初想象的那样定义图像的大小，而是模式将映射到甜甜圈的新坐标系的方式。宽度和高度为1表示图案将按比例缩放到圆环的宽度和高度。

从这里获取我的信息并且当然还没有完全掌握它，但希望这会有所帮助：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

D3.js模式不适用于弧形或圆环图

1 个答案: