Tag: svg

你会如何创建一个JQuery / svg点击拖动选择轮廓效果？: 不确定究竟该怎么称呼它，但是当我点击并拖动一个区域时，我正在寻找一种通过javascript / svg创建虚线轮廓/选择框效果的方法，然后在mouseUp上消失（如果它可以添加）不是原创部分）。如果它存在，jQuery库会很好。我做了一些环顾四周，并没有找到我正在寻找的东西。我猜理论是从第一次点击获得坐标，跟踪鼠标坐标时刻并相应地调整框。但不是从头开始写它会很好。

处理重叠SVG图层中的鼠标事件: 我正在使用d3.js构建地图可视化。我正为美国各州和县绘制填充多边形。县的SVG层位于州的层下。填充状态，但填充不透明度设置为0; 需要填充（我认为）来捕获点击事件。我想在州一级捕获点击事件，但我想在县一级捕捉鼠标hover事件。但是，鼠标hover事件由州捕获，而不是传递到县。有没有办法将事件传递到一个层或以其他方式触发该县的鼠标hover事件？

使用超过100k节点的JavaScript绘制组织结构图的最佳方法: 任何人都可以建议我如何绘制超过100k节点的组织结构图，而不会遇到浏览器崩溃或无响应的页面错误问题。注意：它是一个二叉树图表，因此每个父节点只有两个子节点到目前为止我做了什么： 1）使用谷歌图表API绘制图表：失败：即使我在每个ajax调用上加载了5k个节点，它也会在节点限制超过大约20k时失败 2）canvas和svg：使用d3.js：它的工作正常，而节点大小约为50-100但在加载20k及更多时失败。而主要的缺点是管理节点的路径虽然它使用SVG来构建图表所以请有人帮我搞清楚，所有js，canvas，svg都适用于小数据，但都无法对付大数据这就是应该如何使用大数据绘制图表。

使用Hammer.js缩放SVG: 我正在编写一个跨平台的Web应用程序，它使用SVG显示信息。我需要一个多点触控界面来平移和缩放SVG图形。根据我的研究，似乎Hammer.js是我最好的方法，我使用的是jQuery库版本。我可以使用SVG的viewBox属性平移和缩放图像。我遇到的问题是在缩放缩放期间使用中心点信息（相对于左上角的缩放）。无论在我的图像中的哪个中心点，都应保持在夹点的中心位置。显然，解决方案是修改viewBox的前两部分，但我无法确定正确的值。中心点（event.gesture.center）似乎在浏览器页面坐标中，因此我需要弄清楚如何可靠地缩放它，然后计算viewBox x和y坐标。我找了一些例子，但找不到任何相关的东西。使用viewBox属性是扩展SVG图像的最佳方法吗？还有更好的选择吗？有没有人有从缩放中心缩放SVG图像的示例代码？另外，我注意到即使我将事件处理绑定到SVG元素，捏合手势似乎也可以在页面的任何位置工作。它不是pinch的默认浏览器处理，因为它只使用我的代码缩放SVG图像。这是我用来绑定pinch事件的代码： $(window.demoData.svgElement).hammer().on(“pinch”, function (event) { event.preventDefault(); … }); 感谢您对这两个问题的任何帮助。

SVG – 在按钮单击时更改填充颜色: 我做了一个简单的测试svg-image。我想制作切换按钮，所以当我点击btn-test1时，path1将是fill =“＃000”，其他的是“#FFF”。我要制作一张有大约40条不同路径的地图，但我先尝试这个（不知道是否可能）？这是目前为止的HTML： Test 1 Test 2 Test 3 编辑：这个JavaScript解决了它 $(‘.btn’).click(function() { $(‘#path1, #path2, #path3’).css({ fill: “#ffffff” }); var currentId = $(this).attr(‘id’); $(‘#path’ + currentId +”).css({ fill: “#000” }); });

使用JQuery动态地将SVG加载到SVGWeb中: 我试图动态显示一些SVG内容。此内容作为字符串存储在我的数据源中。示例字符串如下所示： Hello WorldFrom Embedded SVG! 为了适应IE，我正在使用SvgWeb 。我的问题是，要显示svg内容，我需要将其包装在标记组合中。我的挑战是，svg正在通过JQuery异步撤回。而且，据我所知，我无法从JavaScript动态编写“脚本”标签。如何获取使用JQuery检索并动态显示的SVG内容？

在chartist.js中为SVG数据点添加大纲: 我正在玩Chartist.js，只是想知道你是否可以帮我把一些样式应用到SVG上。这是我的代码如下： jQuery的： new Chartist.Line(‘.ct-chart’, { labels: [1, 2, 3, 4, 5, 6, 7, 8], series: [ [5, 9, 7, 8, 5, 3, 5, 4] ] }, { low: 0, showArea: true }); HTML： CSS： .ct-chart .ct-series.ct-series-a .ct-area { fill: orange; } .ct-chart .ct-series.ct-series-a .ct-line { stroke: orange; } .ct-chart .ct-series.ct-series-a .ct-point { stroke: orange; […]

Highcharts：在柱形图上显示特殊标记: 我想在柱形图上放置标记。确切地说，该图表是在板球比赛中每场得分的得分。（截至目前的示例生成图： http ： //img839.imageshack.us/img839/6091/screenshot20111117at124.png ）现在我真正想要的是显示在wicket落在哪个（类似于： http ： //upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Dudley_Nourse_Graph.png/350px-Dudley_Nourse_Graph.png ），列顶部的蓝点。是否有可能在highcharts中实现这一点？我在这个图表中看到了一个这样的片段（这里描述的太阳像： http ： //www.highcharts.com/demo/spline-symbols ）。

如何将元素添加到SVG DOM: 我有一个带有jpg图像的网页，用户可以使用Raphael绘制SVG涂鸦。我希望允许用户在完成后保存合并的光栅化版本（我将使用SVG版本自己做其他事情）当用户单击save时，我想将该背景图像作为元素添加到生成的SVG DOM中，然后使用canvg将SVG写入canvas元素。最后我使用toDataUrl（）方法将其转换为jpg。我无法让中间位工作 – 将图像添加到DOM的最佳方法是什么？当我使用下面的代码时，我得到一个javascript错误，说明appendChild（）不是一个函数。我想知道它是否与我如何使用.html（）方法获取SVG有关 – 也许返回的内容不会被解释为真正的SVG文档？任何帮助非常感谢。 function saveImage(){ var img = document.getElementById(‘canvas’).toDataURL(“image/png”); window.open(img,’Download’); } $(‘#save’).click(function(){ var svg = $(‘#editor’).html(); // Create new SVG Image element. Must also be careful with the namespaces. var svgimg = document.createElementNS(“http://www.w3.org/2000/svg”, “image”); svgimg.setAttributeNS(“http://www.w3.org/1999/xlink”, ‘xlink:href’, “myimage.jpg”); // Append image to SVG svg.appendChild(svgimg); canvg(‘canvas’, svg, […]

使用元素时，SVG单击事件不会触发/冒泡: 我遇到了一个有趣的错误（？），如果你使用作为链接的一部分（例如一个图标）嵌入SVG – 图标本身不会在jQuery中注册click事件，而是单击文本。我认为这是由于SVG事件没有冒泡？如果直接嵌入SVG，无论是否单击文本或图标，链接都会触发。我在这里可以看到一个简单的测试用例： SVG bug测试用例。