d3.js - 为什么这个 SVG 路径在 Firefox 上显示不正确的宽度和高度?
问题描述
我是 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;
}
解决方案
你是这个意思吗?(假设 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 }
推荐阅读
- laravel - CSRF 令牌不匹配从单独的 vue 项目到 laravel 控制器
- scala - Magnolia:在嵌套类型类的情况下类型派生失败
- c# - C#中的SQL多值参数
- javascript - 如何找到多个字符的lastIndexOf?
- python - 安装 pygraph viz 时出错 - 即使我安装了 graphviz 和其他东西
- node.js - Webpack 多个条目,但只想将一个文件附加到 index.html
- python - 为什么我的烧瓶应用程序没有连接到正确的房间
- javascript - 如何在具有可点击下拉菜单的反应中制作带有标签的文本区域
- javascript - 如何在 gtm 自定义模板中读取特定的 dataLayer obj
- python - 字符串索引超出范围,解决方案工作正常