草庐IT

svg_filedata_cache

全部标签

javascript - d3 点击坐标是相对于页面而不是 svg - 如何翻译它们(Chrome 错误)

当一个事件正在播放时,d3.event.x给出鼠标点击的x坐标位置,但相对于整个HTML文档。我尝试使用jQuery的$('svg').position()来获取svg的实际位置,但这会返回明显错误的值。是否有一些简单的方法可以找到svg相对于我忽略的页面的位置?顺便说一句,我正在使用Chrome,以防jQuery问题是一个模糊的浏览器错误。编辑:我在firefox中检查过这个并且$('svg').position()返回正确的坐标。?!? 最佳答案 而不是使用d3.event,这是浏览器的native事件,使用d3.mouse获取

javascript - d3 点击坐标是相对于页面而不是 svg - 如何翻译它们(Chrome 错误)

当一个事件正在播放时,d3.event.x给出鼠标点击的x坐标位置,但相对于整个HTML文档。我尝试使用jQuery的$('svg').position()来获取svg的实际位置,但这会返回明显错误的值。是否有一些简单的方法可以找到svg相对于我忽略的页面的位置?顺便说一句,我正在使用Chrome,以防jQuery问题是一个模糊的浏览器错误。编辑:我在firefox中检查过这个并且$('svg').position()返回正确的坐标。?!? 最佳答案 而不是使用d3.event,这是浏览器的native事件,使用d3.mouse获取

javascript - 如何在 Chrome 中使用 javascript 操作 SVG 元素上的转换?

我想使用JavaScript操作SVG元素的transform="translate(x,y)"属性。所以我得到了这个HTML代码:还有这段JavaScript代码:varpositioner=(function(domUtils){varsvg=document.getElementById("test");varelementOffset=100;functiongetAbsoluteX(leftElement){returndomUtils.getWidth(leftElement)+elementOffset;}functiongetAbsoluteY(topElement){

javascript - 如何在 Chrome 中使用 javascript 操作 SVG 元素上的转换?

我想使用JavaScript操作SVG元素的transform="translate(x,y)"属性。所以我得到了这个HTML代码:还有这段JavaScript代码:varpositioner=(function(domUtils){varsvg=document.getElementById("test");varelementOffset=100;functiongetAbsoluteX(leftElement){returndomUtils.getWidth(leftElement)+elementOffset;}functiongetAbsoluteY(topElement){

javascript - 未封闭的 SVG 路径似乎已封闭

我正在用d3写一些东西,我遇到了一个奇怪的问题。以“Z”字符结尾的封闭路径,但无论我是否包含Z,我创建的每条路径都会关闭(并填充)。即使与从规范中复制的示例隔离开来,也会发生这种情况。例如:我对问题可能是什么感到困惑。如果有任何见解,我将不胜感激。 最佳答案 来自SVGspecification的相关行,关于fillingpaths:Thefilloperationfillsopensubpathsbyperformingthefilloperationasifanadditional"closepath"commandweread

javascript - 未封闭的 SVG 路径似乎已封闭

我正在用d3写一些东西,我遇到了一个奇怪的问题。以“Z”字符结尾的封闭路径,但无论我是否包含Z,我创建的每条路径都会关闭(并填充)。即使与从规范中复制的示例隔离开来,也会发生这种情况。例如:我对问题可能是什么感到困惑。如果有任何见解,我将不胜感激。 最佳答案 来自SVGspecification的相关行,关于fillingpaths:Thefilloperationfillsopensubpathsbyperformingthefilloperationasifanadditional"closepath"commandweread

javascript - 是否可以使用 HTML 的 .querySelector() 通过 SVG 中的 xlink 属性进行选择?

给定:是否可以使用HTMLDOM的.querySelector()或.querySelectorAll()通过其xlink的内容选择SVG内的链接:href属性?这个有效:document.querySelector('a')//这些不会:document.querySelector('[href="url"]')//nulldocument.querySelector('[xlink:href="url"]')//Error:notavalidselectordocument.querySelector('[xlink\:href="url"]')//Error:notavalids

javascript - 是否可以使用 HTML 的 .querySelector() 通过 SVG 中的 xlink 属性进行选择?

给定:是否可以使用HTMLDOM的.querySelector()或.querySelectorAll()通过其xlink的内容选择SVG内的链接:href属性?这个有效:document.querySelector('a')//这些不会:document.querySelector('[href="url"]')//nulldocument.querySelector('[xlink:href="url"]')//Error:notavalidselectordocument.querySelector('[xlink\:href="url"]')//Error:notavalids

javascript - 如何在不附加它的情况下创建 "svg"对象?

考虑以下代码:varsvg=d3.select('#somediv').append("svg").attr("width",w).attr("height",h);我想重构这段代码,让它看起来更像这样:varsvg=makesvg(w,h);d3.select("#somediv").append(svg);请注意,与第一个版本中显示的情况相反,在第二个版本中,append不会创建“svg”对象;它只将它附加到d3.select("#somediv")。问题是如何实现函数makesvg。这反过来又归结为一个问题:如何在不使用append的情况下实例化一个“svg”对象,因为然后可以做

javascript - 如何在不附加它的情况下创建 "svg"对象?

考虑以下代码:varsvg=d3.select('#somediv').append("svg").attr("width",w).attr("height",h);我想重构这段代码,让它看起来更像这样:varsvg=makesvg(w,h);d3.select("#somediv").append(svg);请注意,与第一个版本中显示的情况相反,在第二个版本中,append不会创建“svg”对象;它只将它附加到d3.select("#somediv")。问题是如何实现函数makesvg。这反过来又归结为一个问题:如何在不使用append的情况下实例化一个“svg”对象,因为然后可以做