Tag: svg

将D3 svg保存为高质量图像: 有没有办法将D3 SVG图像保存为高质量图像？如果是，请解释……截至目前我正在使用以下代码将svg保存为图像，但我得到的图像质量不高 – var canvas1 = document.createElement(‘canvas’); canvas1.id = “canvas1”; canvas1.width = w+50; canvas1.height = h+50; document.getElementById(‘pngcon’).appendChild(canvas1); var html = new XMLSerializer().serializeToString(document.getElementById(chartId).querySelector(‘svg’)); var imgsrc = ‘data:image/svg+xml;base64,’+ btoa(html); var canvas = document.getElementById(“canvas1”); var context = canvas.getContext(“2d”); var canvasdata; var image = new Image; image.src = imgsrc; image.onload = function() { context.drawImage(image, 0, 0); canvasdata = […]

如何在svg-objects中存储自定义数据？: 我打算在svg-object中有一些（很多）对象，这些对象将使用JavaScript生成。用户将使用它们执行不同的活动：单击，鼠标hover，鼠标移出。一旦发生任何事件，就需要显示一些特定于对象的数据。问题：如何获取有关对象的数据？例如，用户点击代表“Make A”的汽车的矩形（有几个矩形，每个矩形代表一个单独的品牌）。我如何确定制作？有没有办法将“外部数据”与svg-objects关联起来？

以编程方式合并两个svg路径元素: 我正在使用SVG路径渲染地图（使用jVectormap ）。在某些情况下，必须将一个区域与邻近区域合并。不幸的是，两个区域都没有相互接触，我必须进行插值以填充其间的空间。 jVectormap使用非常简单的SVG路径，其中M设置绝对起点， l连接相对点。是否有任何SVG库涵盖此类操作？

jquery动画元素属性而不是样式: ASAIK jquery animate函数仅接受样式属性。但我想动画元素的属性。考虑一个SVG元素矩形我想动画矩形元素属性“x”和“y”，如下所示 $(“#rect1”).animate({ x: 30, y: 40 }, 1500 ); 但这不是正确的方法，因为动画function会影响样式而不是元素的属性。我知道有很多自定义插件就像raphel.js一样。 An Intro to Raphaël 但我不想使用自定义插件来做到这一点。我想简单地在jquery.animate函数中这样做。这可能吗？谢谢，湿婆

解析SVG并将其添加到svg元素: 我有一个服务，我想动态地将SVG部件添加到ag元素。这是服务返回的内容： Layer 1 我试图使用的代码已被多次修改，这对此有影响： function parseSVG(s, layer) { var div= $(s); for(var i = 0; i < div.children.length; i++) { layer.append(div.children[i]); } } layer是g元素，s是上面的svg。我能得到的最接近的是在svg_1中一次添加title然后是所有路径元素。

SVG仅在狩猎时resize: 我有这个奇怪的问题，svg在safari中hover时resize。我正在使用jquery的hover来替换svg略有不同的页面上的svg。这项工作适用于所有浏览器，除了safari，由于某种原因完全调整了鼠标hover和鼠标输出的svg。我的svg的高度设置在css中 img.svg-graphic { height: 180px; } 并在页面上显示为图像当我将鼠标hover在容器上时，我将svg替换为另一个，然后当我将鼠标hover时返回默认值。 $(‘.container’).hover(function() { $(‘.svg-graphic’).attr(‘src’, ‘svg-icons/version2.svg’); }, function() { $(‘.svg-graphic’).attr(‘src’, ‘https://stackoverflow.com/questions/21536937/svg-resizes-on-hover-in-safari-only/svg-icons/version1.svg’); }); 关于什么可能导致safari完全忽略尺寸的任何想法？

在D3.js中重新排序SVG（z-index）的元素: 我意识到这个问题之前已被问到，但我无法深究它。这是我的图表… http://www.gogeye.com/financialnews/piechart/index3.html 我想要做的就是在图表后面放置硬币。我知道D3渲染它们是为了附加它们。我试图重新附加硬币，但似乎无法让它工作。我已经尝试重新排序，当事物被附加在DOM中，但不断出现错误可能是因为变量在被定义之前被调用等。有人能举例说明如何用我的代码解决这个问题吗？我不希望你为我做这项工作，但我已经把头发拉了很长时间，我似乎无法将其他人的例子用于我的。谢谢

如何将文本放在svg路径的中心: 为了渲染SVG我正在使用jQuery SVG插件。而且，现在我想为每个路径和多边形添加文本。在jsFiddle上，您可以看到插件生成的标记。为了创建文本，我编写了以下代码： var svgg = $(“#rsr”).svg(‘get’); var texts = svgg.createText(); svgg.textpath($(“#Layer_x0020_1”),id, texts.string(‘We go ‘). span(‘up’, { dy: -30, fill: ‘red’ }).span(‘,’, { dy: 30 }). string(‘ then we go down, then up again’)); 在jsFiddle的代码中，您可以看到textpath标记存在，但它不可见。如何将文本添加到每个路径的中心？谢谢。

在Raphael Javascript库中渲染SVG多边形: 据我所知，目前无法在Raphael Javascript库中显示SVG多边形。我正在构建一个需要读入SVG的应用程序，并在Raphael中显示它们，但是，许多这些SVG使用多边形。例如，我正在使用以下格式的多边形读取SVG： <polygon points="260.5,627.75 259.563,628.313 258.625,628.563 258.25… 所以，我想知道……有没有办法将多边形点转换成我可以在拉斐尔绘制的路径？我见过一些使用python和PHP的应用程序，但到目前为止我找不到任何严格的javascript。任何帮助将不胜感激。谢谢