Tag: svg

如何在svg中为多边形提供渐变填充？

我正在使用这个很棒的jQuery插件 – http://benpickles.github.io/peity/ 基本上，它以svg格式呈现迷你图形和图表。 在这个svg元素中，有一个polygon和一个polyline 。 我需要能够给多边形一个渐变作为填充，而不是纯色。 这是插件转换之前的原始HTML： 100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20 这是转换后的图表： 100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20 我试过的： 我试图通过CSS给fill一个渐变，例如fill: linear-gradient(#FF0000, #00FF71) 。 虽然，这导致填充是纯黑色。 这是一个演示

如何动态创建多级饼图的切片

我正在努力通过使用多级饼图来显示父子关系。 我必须通过使用HTML，CSS3和纯JavaScript（没有jQuery或任何库）来实现这一点。 我试图实现像这个JSFiddle上显示的东西，但我不能使用任何第三方库。 到目前为止，我这样做了： .outer-chart{ position: relative; overflow: hidden; width: 350px; height: 350px; border-radius: 50%; background-color: #33ccff; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2); } .outer-circle, .inner-circle { position: absolute; border-radius: 50%; } .outer-circle { top: 15%; left: 15%; right: 15%; bottom: 15%; background-color: #ccff66; box-shadow: inset […]

使用Keith Wood的jQuery SVG插件动画外部加载的SVG

我正在尝试使用Keith Wood的插件为从外部SVG加载的一组路径的填充颜色设置动画。 首先，我将SVG导入div容器： $(document).ready(function() { $(‘#header-main’).svg({loadURL: ‘header.svg’}); var svg = $(‘#header-main’).svg(‘get’); }）; SVG文件如下所示： 我可以像这样更改组或单个路径的填充颜色： svg.style(‘#group1 {fill: black}’); 现在，当我尝试为这样的路径设置动画时： $(‘path’).animate({svgFill: ‘blue’}, 500); 或$（’＃group1’）。animate（{svgFill：’blue’}，500）; 或者与任何其他选择器，例如路径的id，没有任何反应。 但是，如果我要创建一个路径，并像这样动画它： var path1 = svg.createPath(); svg.path(path1.move(50, 90).curveC(0, 90, 0, 30, 50, 30). line(150, 30).curveC(200, 30, 200, 90, 150, 90).close(), {fill: ‘none’, stroke: ‘#D90000’, strokeWidth: 10}); $(‘path’).animate({svgFill: ‘blue’}, 500); 我创建动画的路径，但从header.svg文件导入的其他路径什么都不做。 我在这里做错了什么，或者插件是不是能够动画外部svg？

Highcharts.js设置更改列颜色的阈值

我想知道是否有人可以帮我修改这个Highcharts线图： http ： //jsfiddle.net/highcharts/PMyHQ/到列图仍然保持阈值着色（红色表示值> 0;蓝色表示值<0） 。 问题是如果您只是更改图表类型，请type:’column’ ，然后基于阈值的着色将丢失，所有列都将显示为蓝色。 执行颜色更改的函数是applyGraphGradient() 。 我无法弄清楚如何更改此function以保留基于阈值的着色。 /** * Event handler for applying different colors above and below a threshold value. * Currently this only works in SVG capable browsers. A full solution is scheduled * for Highcharts 3.0. In the current example the data is static, so we don’t need […]

Jquery删除通过jquery svg库添加的绘制线

在我的应用程序中，我有一行通过jQuery SVG插件从一个表格单元格绘制到另一个单元格。 按照博客文章http://www.openstudio.fr/Library-for-simple-drawing-with.html的步骤，我设法添加它。 但与此同时，当鼠标hover时，我需要删除该行并将其绘制在另一个地方。 有没有方法可以删除绘制的线条，还是应该使用不同的方法来隐藏或删除它？ 任何帮助都非常感谢。

如何设置线条动画以跟踪移动的CSS元素？

更新 – 我曾使用SVG动画插件请求帮助修复我的第一次尝试，现在有一个解决方案（按照此链接），这有效地回答了这个问题。 尽管Jleagle指出的attr（）也可以解决问题 我使用jQuery动画了一系列css元素，下一步是用图形直线跟踪每个元素。 线的一端应保持固定，并随元素移动一端。 我想我可以通过SVG和相应的SVG jQuery插件实现这一点，但是我遇到了很多问题， 我想知道我是否应该从不同的方向处理它。 下面是带有三个SVG行的动画框的代码，这样你就可以看到我得到的内容。 这个网站还有一个JS小提琴 使用Javascript $(function() { var balloons = [$(“#box1”), $(“#box2”), $(“#box3”)]; var lines = [$(“#line1”), $(“#line2”), $(“#line3”)]; function act(jqObj, speed, change) { jqObj.animate({ ‘left’ : change }, speed).animate({ ‘left’ : -change }, speed, function() { act(jqObj, speed, change); }); }; for( i = 0; i < […]

如何用SVG图像监听对象的加载事件？

我想在使用snap.svg加载后操纵SVG图像。 不幸的是，从不调用load事件的回调。 如何将加载事件注册到svg对象？ 我创建了这个问题的最小例子 。 HTML： 使用Javascript： alert(‘loading’); $(‘#animation’).on(‘load’, function() { alert(‘loaded’); });

JQuery和SVG – 如何找到’g’标签

想象一下： 我怎样才能找到’g’标签，我想要点击所有标签，而不仅仅是’node1’或’node2’。 我已经尝试过这种方式，但无法使其正常工作。 $(‘g’).click(function(){ alert(“Hellooooo”); });

将Raphael JS在canvas中生成的SVG另存为png的问题

我正在尝试转换由Raphael JS （和用户，因为您可以拖动和旋转图像）生成的SVG。 我在浏览器中跟踪了这个转换SVG图像（JPEG，PNG等），但仍然无法获得它。 它一定很容易，但我不能指责我错了。 我把我的svg放在一个div中， #ec为id ，canvas的是#canvas 。 function saveDaPicture(){ var img = document.getElementById(‘canvas’).toDataURL(“image/png”); $(‘body’).append(”); } $(‘#save’).click(function(){ var svg = $(‘#ec’).html(); alert(svg); canvg(‘canvas’, svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true}); }); 警报给了我： Created with Raphael 这是svg的xml，如果我相信canvg文档 ，那就好了。 无论如何，使用此代码，变量img （应该具有转换后的图像数据）获得具有svg维度的空png的数据。 我猜的唯一一件事就是Raphael JS生成的svg没有很好地形成canvg（比如，如果我按照W3C的推荐 ， image href应该是xlink:href ） 有人对这个问题有所了解吗？ ：d

直接碰撞检测d3js

我试图在我的svg强制布局（d3js）中创建碰撞检测。 我已经按照本教程进行了圆形碰撞。 由于某种原因，它不适用于rect形状。 我试图在面纱中玩参数。 这是我的代码： var node = svg.selectAll(“.node”) .data(json.nodes) .enter().append(“g”) .attr(“class”, “node”) .call(force.drag); node .append(“rect”) .attr(“class”, “tagHolder”) .attr(“width”, 60) .attr(“height”, 60) .attr(“rx”, 5) .attr(“ry”, 5) .attr(“x”, -10) .attr(“y”, -10); 还有这个： svg.selectAll(“.node”) .attr(“x”, function(d) { return dx; }) .attr(“y”, function(d) { return dy; }); link.attr(“x1”, function(d) { return d.source.x; }) .attr(“y1”, function(d) { return d.source.y; […]