草庐IT

javascript - 访问在外部 SVG 文件中定义的 DOM 对象

SVG标准允许使用和引用外部SVG文件。我有一个文件circle.svg,它定义了一个id为“the_circle”的圆对象。从主SVG文件中,我可以使用SVGlinking包含这个圆圈并为其设置动画。.我也想通过javascript访问同一个circle对象,我该怎么做?xlink:href="url(#the_image)#the_circle"的javascript等价物是什么?使用document.getElementById('the_image')我只能访问SVGImageElement而不能访问包含的SVG中定义的对象。 最佳答案

javascript - 使用 raphaeljs javascript 图形库清除容器的最简单方法

我必须清除并重绘raphaeljavascript主容器。我试过varpaper=Raphael(10,50,320,200);paper.remove();//Doesn'tworkpaper.node.removeNode();//thisneitherpaper.removeNode();//thisneither有什么想法吗? 最佳答案 当您创建一篇论文时,它会创建一个DOM对象。你可以访问它paper.canvas当您创建一个新的Raphael对象时,您就创建了一个新的DOM对象并保留了原来的对象!考虑到所有事情,这是最好

javascript - HTML5 Canvas 与 SVG + Raphael.js 的优缺点是什么?

我刚刚使用Canvas开始了一个项目。但我需要做的一件事是跟踪可移动的、可点击的框,如本例所示:http://raphaeljs.com/graffle.html所以我想知道Raphael-js+SVG是否会更好。你会用哪个?为什么? 最佳答案 这个答案是从我对另一个问题的回答中复制过来的。但是OP然后改变了问题,因此这个答案变得不那么相关了。恕我直言,它与这个问题更相关,所以这里是:将canvas和svg之间的区别想象成Photoshop和Illustrator(或者对于OSS用户来说是Gimp和Inkscape)之间的区别。一个

javascript - 如何使用 d3.js 拖动行为拖动 svg 组?

我正在使用D3jsdrag.单个元素被拖动得很好。但我想拖动一组元素。如何完成。这是我的JsFiddlelink上的内容:functiononDragDrop(dragHandler,dropHandler){vardrag=d3.behavior.drag();drag.on("drag",dragHandler).on("dragend",dropHandler);returndrag;}varg=d3.select("body").select("svg").append("g").data([{x:50,y:50}]);g.append("rect").attr("width"

javascript - 如何沿给定路径拖动形状

我有这个简单的虚拟文件,我用它来做一些测试。预期结果是沿着路径拖动红色圆圈。问题是我不知道如何关联这两种形状。//Createscanvas320×200at10,50varr=Raphael(10,50,320,200);varp=r.path("M100,100c0,50100-50100,0c0,50-100-50-100,0z").attr({stroke:"#ddd"}),e=r.ellipse(104,100,4,4).attr({stroke:"none",fill:"#f00"}),/*varc=r.circle(100,100,50).attr({fill:"hsb(

javascript - CSS 动画六边形菜单

我正在尝试找出构建动画六边形菜单的最佳方法。请参阅下图以便更好地理解:六边形汉堡包按钮位于中心。单击后,它会显示汉堡包按钮周围的三Angular形。后者变成了一个十字架来扭转这个过程,把一切都隐藏起来。我的图片实际上在一开始就少了一步。第一张图片应该只显示汉堡按钮,就像codepen演示一样。所以我的问题如下:能否请您告诉我如何通过jQuery和其他工具从HTML到CSS构建这个六边形菜单动画。你会用什么技术来实现它。请记住,虽然codepen示例以简单图标为特色,但我的以三Angular形图片为特色,一旦悬停就会显示带副标题的标题。 最佳答案

javascript - Month Path 只计算月份,不计算实际日期范围

首先,对标题感到抱歉。我正在尝试实现类似的目标:https://bl.ocks.org/mbostock/4063318我真的很接近,我唯一无法得到的是几个月的路径。我正在使用该页面的开源代码以及我对此的变体https://github.com/Teamie/calendar-heatmap/blob/master/src/calendar-heatmap.js目前我非常接近,但这就是结果:这张照片上的日期范围是2016年8月15日-2017年8月15日,但它开始的路径好像是2015年8月1日-2017年8月19日。所以发生的是一个月周围的路径实际上将围绕后半个月一个月和另一个的上半年

javascript - 使用 svg 防止子像素渲染

我目前正在使用SVG,但走到了死胡同。SVG有线条,它们应该与缩放一起缩放(以便它们保持平衡:例如100%宽度10px-->10%宽度1px)我用这段代码缩放所有stroke-widths:varsvgPath=this._svgContainer.find('svg[class*="style"]');for(vari=0;i其中width是缩放后的新宽度,imgData.w是原始未缩放的宽度。问题是,如果我放大到很远。笔划变小并导致亚像素渲染。据说黑线会变成灰色。我的想法是在某个点削减值(value)以防止它。但据我所知,由于屏幕(桌面、移动、4K)不同,我也必须考虑设备像素比如果

javascript - 使用 <canvas> 将非常大的 SVG 转换为 PNG

我正在尝试将一个大的SVG(它的数据URL大约有750000-1000000个字符)转换为PNG,方法是将它的数据URL通过图像传递到Canvas中,但图像只加载了大约1/4的图像SVG。创建方式:varsvg_xml=(newXMLSerializer()).serializeToString(svg),url='data:image/svg+xml;base64,'+btoa(svg_xml);varimg=newImage();img.width=730;img.height=300;img.onload=function(){varcanvas=document.create(

javascript - 创建等高线图

给定一组(x,y,z)坐标,我将如何创建等高线图?很高兴知道如何在d3中实现但如果我有一些方向,我不介意自己尝试实现它。对于d3用户,我可以使用d3.geom.contour()和jasondavies创建等高线图吗?conrec.js:https://github.com/jasondavies/conrec.js基本上,我想使用d3.js复制这个等高线图:http://beaugunderson.com/routes/ 最佳答案 使用conrec.js看起来这会很容易。如果您以现有的形式传递数据,则可以通过对结果调用.conto