草庐IT

svg-edit

全部标签

javascript - 为什么不绘制以编程方式插入的 SVG <tspan> 元素,d3.js 除外?

假设我想以编程方式插入额外的在以下SVG中的元素:onetwothree除其他外,这可以通过纯JavaScript(.appendChild)、jQuery(.append)和d3.js(.append)来完成。然而,尽管这三种方法都成功地插入了元素,但我似乎只能在d3.js插入元素时才能实际显示:请参阅此fiddle中的简化大小写:http://jsfiddle.net/2NLJY/.该行为在我测试过的浏览器中是一致的:Firefox、Chrome和Safari(所有OSX10.8)。这是怎么回事? 最佳答案 您不能使用creat

javascript - 使用 JavaScript 和 D3 调整大小的 SVG 元素

有没有人知道任何允许根据用户设置的窗口大小调整svg元素(也包括整个内容)大小的js代码。我的用户希望在他们的事件桌面上以自定义的小View查看d3图形。而与此同时,其他人会在他们的事件桌面上全屏运行。这意味着图表需要根据用户偏好自行调整大小。 最佳答案 几天前,我整理了一个这种所需行为的演示。在这里查看-http://bl.ocks.org/4444770基本上,您会监听窗口的大小,对包裹所有SVG元素的g元素应用比例变换,然后调整父SVG的大小。在页面加载和窗口调整大小时调用此代码,其中“容器”是保存SVG的div:d3.sel

javascript - 增加 SVG 元素的悬停区域

有一个像这样的SVG元素-现在,这个元素太小了,悬停在上面非常困难。如何增加悬停区域(保持此元素的区域相同),以便即使鼠标指向大约2px远,悬停事件也会被触发? 最佳答案 我的建议是创建另一个完全透明的svg元素,它位于处理悬停事件的对象之上。例如我不知道是否可以按照您描述的方式增加元素上的悬停区域。(如果是的话,我很想知道怎么做。) 关于javascript-增加SVG元素的悬停区域,我们在StackOverflow上找到一个类似的问题: https://s

javascript - 尝试将 svg 从一个 div 移动到另一个时,是什么导致层次结构请求错误?

我正在尝试将svg从一个div移动到另一个。Thisstackquestion提供了我尝试过的这个解决方案。document.getElementById("LightBoxDiv").appendChild(svgId+"V");当我尝试这样做时,我收到了层次结构请求错误。Thisstackquestion建议了几件可能是原因的事情。我不能说我有任何这些东西,但我不确定。Bot我的div在body元素中并且没有嵌套在另一个元素中,但是,其中一个div在使用javascript动态创建之前只有几行。这是我用来创建该div的脚本。varlightboxdiv=document.creat

javascript - SVG:加载文档后运行脚本

我有一个SVG文档,我希望能够在其中包含一个脚本(使用标签)。在此脚本中,我想设置一个函数,该函数将在文档加载并可供操作时调用。如果我用HTML和JQuery做这件事,我会使用$(document).ready(...).我希望在SVG文档中执行相同的操作,但显然我不能以相同的方式使用JQuery。总而言之,我正在寻找的是这样的东西:测试.svg:我的脚本.js:functioninit(evt){varsvgDocument=evt.target.ownerDocument;varsvgRoot=svgDocument.documentElement;//ManipulateSVGD

javascript - SVG 中的多个类

我是SVG的新手(使用D3.js调用所有内容)。最近,我正在做的一个项目遇到了一个巨大的限制。我希望能够为我正在处理的每一类数据制作“g”类。不幸的是,我从一个仅以一种方式连接数据的XML文件中获取数据(例如:person1--->person2,而不是person2--->person1)。我希望能够做的是将从我的数据生成的每个形状放在根类及其连接的类中。如果我可以将这个形状添加到两个或更多类(例如gclass=person1和person2),那将是我认为最快的解决方案......但是这样的事情可能吗?我可以将SVG形状设置为两个或多个类吗?或者它会在我定义新的时覆盖它。我真的希望

javascript - 将 SVG 路径转换为相关命令

给定一个SVG路径元素,如何将所有路径命令转换为相对坐标?例如,转换此路径(包括每个命令,绝对的和相对的,交错的):进入这个等效路径:这个问题的动机是thisquestion. 最佳答案 Snap.SVG有Snap.path.toRelative()。varrel=Snap.path.toRelative(abspathstring);Fiddle 关于javascript-将SVG路径转换为相关命令,我们在StackOverflow上找到一个类似的问题: h

javascript - x-editable 如何获取被点击元素的id

我是x-editable和jQuery的新手,所以我在理解如何使用x-editable获取单击元素的“id”时遇到问题,希望有人能提供帮助。我的页面上有几个链接,位于一个名为#line_item_unit_cost的div中。linklinklinklinklink当我单击其中一个链接时,我将触发一个x可编辑脚本,该脚本允许我进行内联编辑。我遇到的问题是我需要传递我正在处理的订单项,以便我可以更新我的数据库。我不知道如何(或者我做错了)访问我单击的链接的“id”。这是我的脚本:$('#line_item_unit_costa').editable({validate:function(

javascript - 在 A4 svg 绘图中绘制 1 像素笔画宽度图形

我目前正在尝试用svg画一些图形,纸张尺寸为A4,1个逻辑单元代表1mm。所以我将视口(viewport)设置为297mmx210mm,viewbox为297x210。现在的问题是我画的图stroke-width不再是1个像素。例如,即使我将其stroke-width设置为“1px”,上面的这3行也具有完全相同的线宽。在这种设置下是否仍然可以绘制1像素宽的线? 最佳答案 试试这个:vector-effect="non-scaling-stroke"是SVG1.2Tiny的一项功能,它强制笔划宽度完全符合您的指定,无论缩放或单位转换是

javascript - 从 javascript 编辑 SVG 样式

我有一张SVG世界地图,我想通过更改svg中每个区域的样式属性,按各种指标实时为每个区域着色。例如,我想将英国染成蓝色。这需要是动态的,因为数据经常变化并被推送到浏览器。 最佳答案 您可以将CSS样式应用于SVG元素。不用说,这需要合适的标记。因此,例如,如果您的map看起来像(非常简化:-)......您可以简单地执行以下操作:varcountry=document.getElementById("UK");country.setAttribute("style","fill:blue;stroke:black");当然也可以将样