SVG矩形宽度不一致

Question

我有一个用Javascript生成的svg图表。问题是我的作品不一致 - 有些比其他的更宽，虽然都有相同的宽度 - 7.16 ....

部分代码

var svg1 = document.querySelector('.rects'); //group tag
for(var i = 0; i<256; i++){
  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

  rect.classList.add("rect");
  rect.setAttribute("x", counter);
  rect.setAttribute("y", "396"- +json[i*3].close/1.5);
  rect.setAttribute("height", +json[i*3].close/1.5); //width is set in CSS


  svg1.appendChild(rect);
  counter = counter+8.88;

}

这一切都在这个Svg标签中

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" className="small" viewBox="0 0 1200 460" preserveAspectRatio="xMidYMin slice">
    <use xlinkHref="#viewBoxBorder"/>

Answer 1

这是由于两个像素之间的矩形边缘着陆引起的。尝试将x坐标从8.88更改为8或10之类的整数，并对条形宽度执行相同操作。

虽然向量是可无限扩展的，但在初始比例下将硬边缘捕捉到像素值总是明智的。这样可以防止在抗锯齿时出现模糊，并通过各种比例进行放大和缩小，从而保持均匀度。