Tag: svg

克隆SVG后进行SVG过滤: 即时尝试在浏览器中使用SVG。并有下一个问题！我在一些svg元素上使用jquery clone（）。然后将它附加到窗口。然后尝试删除克隆元素。示例代码 window.makeClone = function (){ var cloneSVG = $(‘svg’).clone(); cloneSVG.appendTo(‘body’); } window.removeClone = function (){ $(‘svg:last’).remove(); } 然后发生了神秘的事情。我用filter。并且在第二次克隆后 – >删除主svg丢失他的filter。有一个简单的例子： http ： //jsfiddle.net/4vK47/1/ 不知道如何解决这个问题（

如何使用d3.js在Sunburst图表上定位文本标签: 我正在尝试将文本放置在基于d3.js的Sunburst图表的楔形内部时遇到问题。即使在缩放时， text元素似乎也没有按照需要定位。这是我尝试的代码的简短片段，但未成功： var slices = svg.selectAll(“.form”) .data(function(d) { return data_slices; }) .enter() .append(“g”); slices.append(“path”) .attr(“d”, arc) .attr(“id”,function(d,i){return d[2]+””+i;}) .style(“fill”, function(d) { return color(d[2]);}) .on(“click”,animate) .attr(“class”,”form”) .append(“svg:title”) .text(function(d) { return Math.round(d[0]*100)/100 +” , “+ Math.round(d[1]*100)/100; }); //Something needs to change below…. slices.append(“text”) .style(“font-size”, “10px”) .attr(“x”, function(d) { return y(d[1]); }) .attr(“transform”, function(d) { return “rotate(” […]

检索svg g的子元素: 我正在尝试检索svg g元素的值。以下是我的代码 CNN 我想在上面的例子中访问第三个’g’元素值，即’CNN’。我怎么能用jQuery做到这一点。

SVG D3滚动最大高度: 我有一个非常简单的ui，在一个带有max-height的滚动div容器上添加了一堆rect。 https://jsfiddle.net/bikrantsharma/eqnnd84v/ .legend-main-div { padding: 2%; height: 150px; overflow-y: scroll; border: 1px solid blue; } 它只展示了几个svg项目。如何以最大高度显示容器中的所有物品？

html2canvas.js没有为动态生成的内容捕获图像: 我使用vivagraphs生成动态svg元素但是当我单击捕获按钮时，没有显示任何节点和边缘。这是脚本： $(document).ready(function() { //var testdiv = document.getElementById(“testdiv”); $(‘#btn’).click(function(){ html2canvas($(“#graph1”), { onrendered: function(canvas) { var myImage = canvas.toDataURL(“img/png”); window.open(myImage); } }); }); 当我检查元素时，svg在渲染图形后显示，但快照不包含节点和边缘。有没有替代html2canvas或我可以解决这个问题？

使用缓存的SVG代码创建SVG Object标记: 我正在尝试将HTML5 localstorage用于SVG。我现有的代码用于处理SVG对象，它具有“data”属性，指向SVG文件url。现在，对于HTML5 localstorage，我能够缓存SVG的文件内容。但是我无法将这些内容放在object标签中。如果我将缓存的SVG代码附加到DIV，它看起来很好，但我的应用程序不会正确地对内容进行任何操作。有没有办法，所以我可以创建一个没有“data”属性的SVG对象，并将缓存的SVG内容放在其中？或者用自定义SVG数据构建Object标签的任何方式，没有URL依赖它？

如何使用jQuery或JavaScript从html页面获取SVG代码？: 我有简单的HTML页面，像这样的svg：我怎么能得到字符串：从这个svg。我可以使用jquery和jquery svg。我试试： $(document).ready(function() { console.log($(“#plan #rect1”)[0]); }) 在控制台我采取这个字符串，但我必须在变量中获取字符串，如下所示： var str = $(“#plan #rect1”)[0]; 变量str是[对象SVGRectElement] [在此输入链接描述] 1

使用jQuery在树的中间插入（g）节点（SVG）: 在树的中间插入节点的最佳建议/有效方法是什么。如何转置这个 … … … … 对此 … … … … @jsFiddle 我试过了 var $parent = $(“g”).attr(“id”,”parent”); var $root = $(“#root”); $root.contents().each(function(){ $child=$(this); $child.remove(); $parent.append($child); }); $root.append($parent); 我也试过在这个答案中使用moveTo方法 (function($){ $.fn.moveTo = function(selector){ return this.each(function(){ var cl = $(this).clone(); $(cl).appendTo(selector); $(this).remove(); }); }; })(jQuery); $root.contents().each(function() { $(this).moveTo($parent); }); 所有这些方法都在简单的场景中工作，但是当树真的很大时，浏览器只是挂起，是否有更有效的方法来执行此操作？我正在寻找一个jQuery或纯JavaScript的解决方案。

jQuery-ui resizable：resize不适用于动态创建的SVG元素: 我在有一个SVG ，想要拖动它并resize。当我在HTML中静态创建元素时，如下所示： $(document).ready(function() { $(‘div’).draggable({ handle: ‘rect’ }).resizable({ aspectRatio: 1.0 }); }); 一切正常。与一起拖动并resize，但是当我动态生成元素时： $(document).ready(function() { $(‘body’).append(”); var svg = document.createElementNS(‘http://www.w3.org/2000/svg’, “svg”); svg.setAttributeNS(null, “viewbox”, “0 0 400 400”); $(‘div’).append(svg); var square = document.createElementNS(‘http://www.w3.org/2000/svg’, “rect”); square.setAttributeNS(null, “width”, “200”); square.setAttributeNS(null, “height”, “200”); square.setAttributeNS(null, “x”, “0”); square.setAttributeNS(null, “y”, “0”); square.setAttributeNS(null, “style”, “fill:#FF0000”); $(‘svg’).append(square); $(‘div’).draggable({ handle: […]

在d3中应用转换时出错: 我试图在d3中设计的条形图上应用一些过渡效果。这是我的代码 – svg.selectAll(“.bar”) .data(data) .enter().append(“g”) .attr(“class”, “bar”) .append(“rect”) .attr(“rx”, barRadius) .attr(“fill”,”333″ ) // .attr(“color_value”, “steelblue”) .attr(“index_value”, function(d, i) { return “index-” + d[columns[0]].replace(/[^a-zA-Z0-9]/g, ”, ‘gi’); }) .attr(“class”, function(d, i) { return “bars-Bubble-index-” + d[columns[0]].replace(/[^a-zA-Z0-9]/g, ”, ‘gi’)+div; }) .attr(“id”, function(d) { return d[columns[0]] + “:” + d[measure1]; }) .attr(“onclick”, fun) .attr(“x”, function(d) { return x(d[columns[0]]); […]