我是D3和SVG的新手,并试图在OSX Firefox 61.0.2上使用SVG路径绘制自定义形状,这是下面的代码
var svg = d3.select("body")
.append("svg")
.attr("width", 1800)
.attr("height", 600)
function drawCandle(x, y, width, upper, body, lower){
var path = d3.path()
// path.moveTo(x + width/2, y)
// path.lineTo(x + width/2, y + upper + body + lower)
path.moveTo(x, y + upper)
path.lineTo(x + width, y + upper)
path.closePath()
return path
}
var p = svg.append('path')
console.log(p.style('stroke-width'))
p.attr('d', drawCandle(200,100,20, 50, 100, 80))
在开发人员工具中检查时生成的路径如下所示
<svg width="1800" height="600"><path d="M200,150L220,150Z"></path></svg>
但是,如果我要在元素上使用Inspector悬停,它将显示宽度为24 x 4
我在这里错过了什么吗?这不应该是20 x 1 我的CSS当前是
path{
stroke: blue;
shape-rendering:crispEdges;
}
答案 0 :(得分:1)
你是这个意思吗? (假设x,y是蜡烛的左上角):
path.moveTo(x, y);
path.lineTo(x + width, y);
path.lineTo(x + width, y + upper);
path.lineTo(x, y + upper);
path.closePath();
http://jsfiddle.net/ibowankenobi/ozd10hq9/
您还会看到不同之处,因为开发人员工具的DOM rect取决于供应商,Firefox添加了笔划宽度,chrome没有。在幕后,这两个客户的rect都是正确的,您可以验证是否这样做:
console.log(p.node().getBBox());//SVGRect { x: 200, y: 100, width: 20, height: 30 }
答案 1 :(得分:1)
似乎与stroke-miterlimit
用于计算尺寸的方式有关。将stroke-miterlimit
更改为1
时,会将高度从4
更改为1.45001
var svg = d3.select("body")
.append("svg")
.attr("width", 1800)
.attr("height", 600)
function drawCandle(x, y, width, upper, body, lower){
var path = d3.path()
// path.moveTo(x + width/2, y)
// path.lineTo(x + width/2, y + upper + body + lower)
path.moveTo(x, y + upper)
path.lineTo(x + width, y + upper)
path.closePath()
return path
}
var p = svg.append('path')
console.log(p.style('stroke-width'))
p.attr('d', drawCandle(200,100,20, 50, 100, 80))
path{
stroke: blue;
stroke-width:1px;
stroke-miterlimit: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>