Tag: svg

D3JS：如何将SVG文本转换为path？

有没有一种D3.js的方式来将文本元素转换为path元素？ 所以当我抓住生成的SVG，我可以保留我的文字形状。

Snap.svg可以用在Node.js的服务器端吗？ （不通过浏览器）

我需要使用一些服务器端代码（如使用cron作业）来创build和操作某些SVG，但是我想知道是否可以在这种情况下使用Snap.svg，而不包含在网页中。 这是否会在没有Snap.svg的情况下在浏览器中运行？

计算字体字形的确切大小

我需要一种方法来查找相对于其边界框的字形的确切大小和位置。 我们使用D3.js创build一个标题，一个较小的字体和一个短的正文文本的SVG。 非常多这个： Lorem ipsum Lorem ipsum dolor Lorem ipsum dolor坐amet， consectetur adipisicing elit， sed做eiusmod tempor incididunt ut labore et dolore magna aliqua 正如在这个例子中，我需要文字左alignment，无论字体大小。 问题是它是alignment的每个行边界框，而不是字形。 这使标题看起来缩进。 如何计算边界框和字形之间的空间，以便我可以正确地alignment文本？ 一位同事坐下来，手动测量了英文字体，效果很好。 我们可以在Adobe Illustrator中做到这一点，但我们需要英文，中文和阿拉伯文字体的信息。 手工操作或多或less是不可能的。 我可以想出的唯一解决scheme是在canvas元素中键入每个字符，并映射每个像素以查看字形开始和结束的位置。 我认为最理想的是使用SVG字体path信息来find极值，这样我们就可以得到确切的数字而不是估计值。 我们的估计有一个很大的误差。 有没有办法做到这一点node.js？ SVG的一个例子是： <svg viewBox="0,0,1008,1424" height="1052px" width="744px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(50,150)" class="container"> <g transform="translate(0,205)" class="textContainer"> <g fill="white" font-family="serif" font-size="" class="header"> <text> […]

debuggingdomjs和highcharts

好的，所以我试图将一个相当复杂的highcharts渲染脚本从前端移动到通过nodejs进行的服务器端处理 它实际上相当不错。 我有“没有错误”和图表是渲染与数据到SVG。 问题是，当我去查看浏览器中的输出svg的全部搞砸了。 在萤火虫我得到以下“警告”： Unexpected value NaN parsing y attribute. Unexpected value NaN parsing x attribute. Unexpected value NaN parsing y attribute. Unexpected value NaN parsing x attribute. 我的问题是，我怎么去debugging呢？ 我不知道哪里的NaN值是在highcharts源代码中计算的，并且在控制台中没有得到传统的js错误。 基本上相同的代码目前在实际的浏览器环境中工作正常，但是在使用nodejs和domjs处理时失败，所以它的可能问题与此有关。 这是我的节点脚本： # base libs {jsdom} = require 'jsdom' jade = require 'jade' fs = require 'fs' # chart and settings Chart = require […]

将SVG代码转换为node.js中的PNG数据URI

我想将简单的dynamicsvg片段转换为服务器上的PNG数据URI。 像这样的东西： var svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>' console.log('<img src="data:image/png;base64,'+toPng(svg, 100, 100)+'">') 我看过使用imagemagick和一些phantomJS变体的例子，但是我正在寻找node.js中的dynamic解决scheme，最好没有I / O。

SVG到canvas与d3.js

有没有人在创buildd3.js可视化文件时尝试使用svgcanvas库？ 我已经尝试使用canvg.js和d3.js从android 2.3应用程序webview中将svg转换为canvas，但是当我调用： svg.selectAll(".axis") .data(d3.range(angle.domain()[1])) .enter().append("g") .attr("class", "axis") .attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; }) .call(d3.svg.axis() .scale(radius.copy().range([-5, -outerRadius])) .ticks(5) .orient("left")) .append("text") .attr("y", function (d) { if (window.innerWidth < 455){ console.log("innerWidth less than 455: ",window.innerWidth); return -(window.innerHeight * .33); } else{ console.log("innerWidth greater than 455: ",window.innerWidth); return -(window.innerHeight * […]

D3js：如何生成独立的SVG文件？ （的NodeJS）

给定一个D3js代码 ， 如 ： function () { var svg = window.d3.select("body") .append("svg") .attr("width", 100) .attr("height", 100); svg.append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 80) .attr("height", 80) .style("fill", "orange"); } 如何使用我的D3js代码和NodeJS生成正确的独立* .svg文件？

节点js错误：产卵ENOENT

我正在尝试将SVG转换为节点js的PNG。 我的代码在这里： http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'image/png'}); var convert = child_proc.spawn("convert", ["svg:", "png:-"]), values = (url.parse(req.url, true).query['values'] || ".5,.5") .split(",") .map(function(v){return parseFloat(v)}); convert.stdout.on('data', function (data) { res.write(data); }); convert.on('exit', function(code) { res.end(); }); jsdom.env({features:{QuerySelector:true}, html:htmlStub, scripts:scripts, done:function(errors, window) { var svgsrc = window.insertPie("#pie", w, h, values).innerHTML; //jsdom's domToHTML will lowercase element names svgsrc […]