Articles of svg

我如何运行一个JavaScript作为node.js脚本没有DOM?

https://github.com/jasondavies/d3-cloud是使用D3库的javascript中的词云。 这是一个交互式演示 。 演示使用d3-cloud脚本在HTML中生成SVG。 我想在服务器端使用它,并获取node.js生成一个SVG文件,并将其保存到磁盘,只要我更新我的数据,而不是将D3库加载到浏览器并呈现在那里。 有没有办法做到这一点? 我可以使用似乎依赖HTML DOM而不使用DOM的库吗? 我是node.js的新手

在d3的指导下,如何通过点击来改变节点的形状?

我在d3中有一个强制定向图,并希望能够点击圆形节点并将它们变成矩形。 然后,如果我点击一个矩形,我想它恢复到一个圆圈。 我已经看过这个和有关的问题,但我认为他们是D3的早期版本,不为我工作。 我可以做到这一点,我的圈子的大小和颜色会改变点击,并与下面的代码,我可以用一个黑色的矩形replace圆节点,但它不附加在图上,只是一个黑色的方块SVG。 node.on("click", function(d,i) { var size = 20; d3.select(this).remove(); svg.append("rect") .attr("x", dx) .attr("y", dy) .attr("height", size) .attr("width", size) .style("fill", function(d) { return color( d.group); }); }) 任何人都可以告诉我我失踪了吗? 我怀疑rect没有被附加到graphics数据上,但是我没有足够的熟悉d3来理解我应该改变什么。 谢谢。

呈现svg文件,并使用快递服务

我想知道如何使用Express呈现和提供svg文件。 现在,我可以将svg作为原始XML文件。 这是我在做什么: 路线 router.get('/status', function (req, res, next) { res.setHeader('Content-Type', 'image/svg+xml'); res.sendFile(path.join(__dirname, '../views/status.svg')); }); SVG <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke: black;stroke-width:5;opacity:0.5" /> </svg> 当我点击这条path时,svg文件的原始XML将被提供给浏览器。 我怎样才能把它作为一个SVG图像先渲染,然后提供它?

如何使用nodejs将svg节点保存到文件中?

我正在使用d3通过一个小帮手包: https : //www.npmjs.com/package/d3-node 我使用d3-node创build了我的svg文件,下面是代码。 const D3Node = require('d3-node') var d3n = new D3Node() var svg = d3n.createSVG() .style("width","1920px") .style("height","1080px") .attr("preserveAspectRatio","true") .html(firstTemplate) .append("myCustomTag") 在此之后,我不知道如何保存输出。 主要的问题是在myCustomTag 。 console.log(d3n.d3Element.select("svg").node().innerHTML) 这行应该输出我的SVG,它的确如此,除了myCustomTag变成mycustomtag和我的SVG被损坏。 我试过select("svg").node().outerHTML , select("svg").html() ,innerText,我什么也找不到。 在这种情况下,我不能使用innerHTML,有没有办法直接从d3variables存储svg文件?

将SVGpath转换为线段

我正在尝试将SVGpath转换为Node中的点列表。 我使用elementtree来parsingSVG文件。 d是path的定义,getPos简单地将“x,y”转换为带有x和ay的对象,doLine只是简单地将该坐标添加到列表中。 d = path.get('d') words = d.split(' ') oldPos = undefined startPos = undefined for i in [0..words.length] word = words[i] if word == 'm' or word == 'M' oldPos = getPos(words[i + 1]) startPos = getPos(words[i + 1]) i += 1 else if word == 'l' or word == 'L' console.log('done nothing…') […]

toDataURL不适用于具有SVG图像的html5canvas

我相信我的问题的答案可以在SVG的canvas的toDataURL方法有相当的? 。 有人可以确认或给我一个正确的方向指针。 如果canvas包含Chrome和/或Safari上的SVG,则无法使用canvas.toDataURL()生成正确的图像。 下面的代码说明了这个问题。 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function () { var __readLocalXml = function(file) { xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET",file,false); xmlHttp.send(); return xmlHttp.responseXML; }; var __drawSVG = function(context, sourceSVG, x, y){ var svg_xml = (new XMLSerializer()).serializeToString(sourceSVG); var img = new Image(); img.src=""; var myFunction = function() { context.drawImage(img, x, y); […]

使用Express.js提供纯文本SVG(与Cheerio.js相关的解决scheme)

我正在尝试在通过Express.js发送之前处理SVG。 我有以下代码: app.get("/iconic/styles/:style/:base/:icon", function (req, res) { var style = req.params.style; var base = req.params.base; var icon = req.params.icon; var iconPath = path.join(iconFolderRoot, style, icon); svgProcessor(iconPath, base).then(function (svg) { //console.log(svg); // SO: See the example output posted below res.header("Content-Type","image/svg+xml"); //res.send(new Buffer(svg, 'binary')); // No difference res.send(svg); }).catch(function (err) { res.status(404).send("Error" + JSON.stringify(err, null, " ")); […]

我如何有一个特定的d3节点是一个在有向图中的图像?

我做了一个看起来类似于此的力量指示图。 我希望中心的Nine Inch Nails节点是一个图像,但其余的节点只是圆圈。 在回答这个问题之后 ,似乎并不难,但我无法理解svg,defs,patterns和d3的组合。 我的代码是: var simulation = d3.forceSimulation() .force("charge", d3.forceManyBody().strength(-50)) .force("collide", d3.forceCollide().radius(function (d) { return 15 – d.group}).strength(2).iterations(2)) .force("link", d3.forceLink().id(function(d, i) { return i;}).distance(20).strength(0.9)) .force("center", d3.forceCenter(width/2, height/2)) .force('X', d3.forceX(width/2).strength(0.15)) .force('Y', d3.forceY(height/2).strength(0.15)); var link = svg.append("g") .attr("class", "links") .selectAll("line") .data(graph.links) .enter().append("line") var defs = svg.append('svg:defs'); defs.append("svg:pattern") .attr("id", "vit-icon") .attr("width", 48) .attr("height", 48) .attr("patternUnits", […]

JavaScript中的LESS似乎蹒跚作响:解决方法?

我发现LESS有一个懒散的JavaScript评估器,至less是我使用它的方式,也就是在将客户端上传到Web服务器之前,将* .less文件编译成* .css文件。 我知道,编译可能更经常在服务器端完成,但为了性能和简单性,我们只需要服务器上的CSS文件。 我正在编译Fedora Linux上的LESS文件,并在这些指令中安装了lessc ruby gem安装到Node Package Manager中。 编译器工作正常,但据我所知,JavaScriptexpression式评估非常有限。 我相信这也适用于基于此发布的服务器端JavaScriptexpression式评估, 这表明了JavaScript引擎如何插入到LESS环境中的不确定性。 我可以使用的只是简单的,逗号分隔的expression式,如下所示: @bar: ` "ignored-string-expression" , 5 `; div.test-thing { content: ~"@{bar}"; } 编译成: div.test-thing { content: 5; } 当我尝试定义一个函数时,编译器barfs(无论expression式中的分号是否反斜线): [719] anjaneya% cat testfunc.less @bar: `function foo() {return 5}; foo()`; div.test-thing { content: ~"@{bar}"; } [720] anjaneya% lessc testfunc.less SyntaxError: JavaScript evaluation error: […]

在使用Inkscape在gulp任务中使用SVG时遇到问题

那么,我正在尝试执行任务中的每个文件的inkscape任务。 这个想法是转换我在复合path中的每个SVG文件(一个SVG只由一个复杂的path组成)。 我试图用这样的东西来实现这个: gulp.task('minify-shapes', function() { function makeChange() { var Stream = require('stream'); function transform(file, cb) { var svgConverter = new Inkscape(['–verb=ObjectToPath', '–export-plain-svg']); var stdout = new Stream(); var bufs = []; console.log(file.history); stdout.on('data', function(d) { bufs.push(d); }); stdout.on('end', function() { var buf = Buffer.concat(bufs); file.contents = buf; cb(null, file); }); file.pipe(svgConverter).pipe(stdout); } return require('event-stream').map(transform); […]