Question

在D3中我设置了一个缩放监听器，一个SVG形状（圆圈）和一个def用于图像用作我的形状的背景。当我放大chrome时，safari都很流畅但是在firefox中图像变焦但是当我停止变焦时，我看到一个轻微的口吃，图像移动了一个像素左右。这有时会在缩放时发生。

var zoomListener = d3.behavior.zoom()
    .center([100, 100])
    .on('zoom', function () {
        svg.attr('transform', 'translate(' +
            d3.event.translate + ')scale(' +
            d3.event.scale + ')');
    }),
    svg = d3.select($('body')[0])
        .append('svg')
        .call(zoomListener)
        .append('g');

// defs for image patterns    
svg.append('defs')
  .append('svg:pattern')
  .attr('class', 'circle-image-pattern')
  .append('svg:image')
  .attr('class', 'circle-image');

svg.select('.circle-image-pattern')
  .attr('id', 'circle-image')
  .attr('width', '1')
  .attr('height', '1')
  .attr('x', '10')
  .attr('y', '10');

svg.select('image.circle-image')
  .attr('xlink:href', 'http://1pd.org/mochigames/nyan-cat-fly_thumb_100x100.png')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', 100)
  .attr('height', 100)
  .attr('preserveAspectRatio', 'xMidYMid slice');

// append circle we want to set image 
// background and be able to zoom on
svg.append('svg:circle')
  .attr('r', 50)
  .attr('class', 'circle-image')
  .attr('cy', 100)
  .attr('cx', 100)
  .attr('fill', 'url(#circle-image)');

JSFiddle演示https://jsfiddle.net/dgrhgjuL/3/

不确定我在d3或firefox问题中设置缩放或图像的方式是否存在问题。

在放大Firefox时D3填充图像口吃

0 个答案: