Tag: svg

jsPlumb在调用setPaintStyle（）时删除直接连接

我正在使用jsPlumb进行中型项目。 虽然文档在可靠的解释方面很小，但我已经设法完成了项目，现在我已准备好提供它。 在交货日期之前，我被要求将连接线笔直而不是弯曲。 我认为这就像在jsPlumb connect方法中添加一个关键字一样简单： jsPlumb.connect({ connector: ‘Straight’… }) ……就是这样。 所以有什么问题？ 我正在研究的这个项目必须允许用户“选择”连接线，然后按“删除”按钮清除他们选择的连接。 我允许用户通过调用jsPlumb的setPaintStyle()方法来选择连接，如下所示： // Select/Deselect each connection on click jsPlumb.bind(‘click’, function (connection, e) { e.preventDefault(); connection.setPaintStyle({ strokeStyle: ‘red’ }); }); 仅当线条弯曲时才会按预期工作（ 默认为jsPlumb ）。 但是，如果connect()方法中的connect() connector选项更改为“直线” ，则垂直连接线（ 它们的端点彼此相交）在我单击时会消失。 其余的直线没有直接相互交叉的直线点没有这个问题。 完全删除连接器选项，或将其值设置为“Bezier”，或者在选项设置为“Straight”时不调用setPaintStyle()方法，然后单击的行保持原样。 这是一个jsBin示例： jsPlumb setPaintStyle（）与直线bug 最初我认为这是我的应用程序中的一个错误，但在花了很多时间之后我将问题跟踪到setPaintStyle（）方法。 我非常有信心这是一个jsPlumb错误，但我并不完全确定。 在这一点上非常令人沮丧，因为唯一能阻止我提供项目的是能够将笔触颜色更改为红色。 如果我能用直线完成这个简单的任务，那么我可以前进。 我已经考虑过自己定位SVG路径节点并改变这种方式的笔触颜色，但由于jsPlumb使用VML for IE8（ ie8是这个项目的要求 ），我不确定我能做到这一点。 有什么建议？

svg到png不工作，怀疑svg元素差异

我无法弄清楚为什么两个不同的svg将导致我的javascript在一个实例中工作，但在另一个实例中没有。 我在两个例子中只更换了svg元素，一个工作，一个不工作。 这是两个jsFiddles中的代码。 我从这里得到的工作实例。 最终，我的目标是保存平面图的当前svg元素，并将转换后的png作为内联img插入到富文本区域中。 好像你拍了一个裁剪的平面图截图，然后把它粘贴到你在帮助台网站上看到的富文本区域。 我只是无法转换为png。 工作： JsFiddle 不工作： JsFiddle 这是js，我不能添加svg代码或它将使我超过Stackoverflow的字符限制。 var svgString = new XMLSerializer().serializeToString(document.querySelector(‘#svg2’)); var canvas = document.getElementById(“canvas”); var ctx = canvas.getContext(“2d”); var DOMURL = self.URL || self.webkitURL || self; var img = new Image(); var svg = new Blob([svgString], { type: “image/svg+xml;charset=utf-8” }); var url = DOMURL.createObjectURL(svg); img.onload = function() { […]

独立SVG中的动画（带ecmascript（和jQuery ?!））

我使用inkscape创建了一个SVG，现在我想根据一些逻辑添加一些动画。 我非常了解JavaScript并且具有jQuery的基本经验。 所以我想我也可以使用jQuery为我的SVG制作动画。 Google发现了无数关于如何使用嵌入在XHTML中的内联SVG的教程，但我有一个独立的SVG和Firefox抱怨 错误：b.style未定义 源文件：[…] jquery.js 行：16 有没有办法让jQuery工作？ 或者，作为替代方案，您是否可以推荐另一个我可以使用的JavaScript库来实现目的？

将元素追加到d3.js中的现有元素

我正在尝试创建一个实时条形图，使用d3.js绘制随时间变化的值 这就是我这样做的方式。 var dataset = [ 5, 10, 15, 20, 25 ]; var w = 1800; var h = 500; var barPadding = 1; setInterval(function(){ dataset.push(Math.floor(Math.random()*51)); draw(); },1000); function draw(){ d3.select(“svg”).remove(); var svg = d3.select(“body”) .append(“svg”) .attr(“width”, w) .attr(“height”, h); svg.selectAll(“rect”).data(dataset) .enter() .append(“rect”) .attr(“x”, function(d, i){return 12*i;}) .attr(“y”, function(d){return h -d*4; }) .attr(“width”, 11) .attr(“height”, […]

绘制SVG路径的最简单方法

我从这里尝试了以下的tutiroal： http ：//jakearchibald.com/2013/animated-line-drawing-svg/ var path = document.querySelector(“.svg1”); var length = path.getTotalLength(); path.style.transition = path.style.WebkitTransition = “none”; path.style.strokeDasharray = length; path.style.strokeDashoffset = length; path.getBoundingClientRect(); path.style.transition = path.style.WebkitTransition = “stroke-dashoffset 1s ease-out”; path.style.strokeDashoffset = 0; HTML如下： 问题是当我在Firefox中使用它时，它可以工作。 但是，如果我选择使用Chrome，那么动画会以75％的速度冻结，并在30秒内立即跳至100％。 我注意到，动画在一种情况下不会冻结 – 如果我使用stroke-dashoffset 530ms ease-out ，即530ms或更少。 有人可以建议一个解决方案或建议一个很好的方法来动画svg路径没有大量无用的代码？

隐藏时，SVG的GetBBox

我现在试图解决这个问题超过一天，但我找不到答案。 我的问题是我需要扩展SVG图像（响应式设计）。 我需要在客户端操作SVG代码，因此通过img标签嵌入它不是一种选择。 因此我尝试使用内嵌图像。 但是，为了正确地缩放它，似乎我需要设置viewBox属性。 SVG文件是由某些软件生成的，这些软件无法自行设置边界框，因此我的想法是为此目的使用JavaScript。 问题是我的软件使用库中的各种选项卡控件，我无法修改。 我不能只获得边界框，因为它最初没有呈现，因此我只是回到零（在Chrome中）或错误消息（在Firefox中）。 我需要的是一种获取边界框大小而不实际渲染对象的方法。 无法操纵显示参数，库用于显示和隐藏选项卡。 有任何想法吗？ 一个想法是将SVG复制到另一个可见的div中，但我不知道这是否能解决问题。 而且我不知道该怎么做。 最好的祝福

如何以编程方式在javascript中获取旋转的svg文本边界

我正在动态渲染SVG图像并创建旋转文本。 如果旋转的文本与其他文本重叠，我需要删除该文本。 但我无法测量旋转的文本来创建边界并检查下一个标签文本区域。 我已经创建了3个SVG元素来解释。 SVG-1显示重叠的文本。 SVG-2显示重叠的旋转文本（角度-10） SVG-3显示旋转的文本而不重叠（角度-50） 我将动态地将文本旋转到任何角度。 如果在旋转文本时它重叠，我需要以编程方式删除重叠的文本。 小提琴链接 Sprint 13_March_2015 DT_Apr2015_Sprint13 Sprint 13_March_2015 DT_Apr2015_Sprint13 Sprint 13_March_2015 DT_Apr2015_Sprint13 有谁能提出解决方案？

jquery特定属性的动画

所以我正在使用gRaphael创建一些图表。 这将创建一个很酷的条形图线，其中包含一些点。 这些点具有……节点，其中x = 10 y = 20作为其属性。 例 rect x =“135.8”y =“115.8”width =“8.399999999999999”height =“8.399999999999999”r =“0”rx =“0”ry =“0”fill =“＃ff0000”stroke =“none” 如果可能的话，我想用jquery为这个人制作动画。 如果我这样做的话 $（ “矩形”）。点击（函数（{ $（本）.animate（{ ‘X’：30 }）; }）; 为了给x coordenate制作动画，我觉得它不起作用的原因很明显？ 呵呵。 此外，我已经尝试将属性x设置为变量并尝试设置动画，而不是任何动画。 任何人都可以用gRaphael帮助我制作动画和svg吗？ 这例如有效 $（“rect”）。live（’click’，function（）{$（this）.attr（’x’，100）;}）; 它移动节点，但当然不会动画它 谢谢！

合并来自Raphael svg的图片

试图创造 第1步 – 让用户通过Ajax，Raphael和Raphael freetransform上传图像。 步骤2 – 单击按钮以显示合并上载图像中的一个图像。 （问题）：我发现有关转换Raphael svg 1 2 3的类似post， 所以我也使用Canvg，但得到console.log： Resource interpreted as image but transferred with MIME type text/html error: image “” not found 。 请帮我找到解决方法。 或任何线索如何达到相同的目标（将上传的几个Raphael svg图像转换为一个png / jpeg）？ 谢谢！ 步骤1 // upload images and ajax show in page var paper = Raphael($(‘.upload_img’)[0], 400, 200); $(‘.upload_btn’).click(function(){ … $.ajax({ type: […]

SVG Text属性加倍 – HTML2CANVAS

这是mycode和JSFiddle的链接。 HTML Inventory JS $(document).ready(function(){ $(‘#export’).on(‘click’, function() { html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); }, }); }); }); 我正在尝试使用html2canvas库将svg转换为canvas图像。 在示例中，我只是将canvas图像附加到输出。 您可以清楚地看到文本成倍增加。 任何人都可以建议我解决这个问题。 希望我的问题很清楚。 提前致谢。