带有笔划破折号阵列的一系列 cicles 是无意义的，无论是帆布还是 svg

Question

我想画一系列共享一个共同中心点的圆，每个圆的路径都应该是虚线的。我已经在画布或 svg 中尝试过，如下所示

// svg.datum(d3.range(40)).enter().append('g')
var w = window.innerWidth,
    h = window.innerHeight;
var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);
// svg.append("rect")
//     .attr("width", w)
//     .attr("height", h);
var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
svg.append("g").selectAll("circle")
    .data(d3.range(35,60))
    // .data([25])
  .enter().append("circle")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
    // .attr("transform", "rotate(-10," + w / 2 + "," + h / 2 + ")" )
    .attr("stroke-dasharray", "5%")                                        
    // .attr("stroke-dashoffset", "15")                                        
    .attr("r", function(d) { return d * 5; });
svg.append("g").selectAll("circle")
    .data(d3.range(25,35))
  .enter().append("circle")
    .attr("stroke-dasharray", "10")                                        
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
    .attr("class", "salmon")                                        
    .attr("r", function(d) { return d * 5; });

body{
	/*background: salmon;*/
	/*color: #fff;*/
	padding: 0;
	margin: 0;
}
canvas{
	/*background: #ccc;*/
}
svg{
	/*background: rgba(46,139,87,0.5);*/
	background: #fff;
}
rect {
  fill: none;
  pointer-events: all;
}
circle {
  fill: none;
  stroke: rgba(46,139,87,0.5);
}
.salmon{
	stroke: salmon;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>

https://jsfiddle.net/fanyer/kcwL3vwc/

一条白线，在最初绘制的基线下方的开放邻域之间按一系列圆圈放大。

有什么解决方案可以消除不均匀吗？

Answer 1

确实，它从某个位置开始绘制。

对于 svg ，它的引用表明它的开始是 3 点钟。

对于画布，它的参考，它的 2d 上下文从 12 点钟开始。

Answer 2

我是提问者。我已经在 mdn 和 msdn 中查找了 svg 和 webgl，除了 directX 文档之外，使用 opengl b。似乎它必须确定绘制图形的基线。因此，在很多情况下都没有问题，但对于一个或多个

。

这是一系列相互成比例的虚线图形。这会把坏处吹到人们能看到的程度。即使有一条曲线，问题也存在，感觉不到。 一个典型的例子是许多笔划虚线圆圈共享相同的中心点。

在我看来，它应该等于计算机或系统图形库无法找出真正的分数但十进制表示的问题