Tag: svg

为什么把svg标签渲染到一个ejs文件不能识别

我尝试使用d3-node在服务器端创build图表，并尝试使用以下代码将新图表呈现为ejs：<％= svgChart％>当我使用浏览器查看它时，它只显示如下的svg标记内容： <svg xmlns="http://www.w3.org/2000/svg" width="960" height="400"><defs> <style type="text/css"><![CDATA[ .axis{font: 10px sans-serif;} .axis path,.axis line{fill: none;stroke: #000;shape-rendering: crispEdges;} .x.axis path{display: none;} ]]></style></defs><g transform="translate(40,20)"><path d="M20,32.4L20.430000000000003,32.4L20.86,32.4L21.290000000000003,32.4L21.720000000000002,32.4L22.150000000000002,32.4L22.580000000000002,32.4L23.01,32.4L23.44,32.4L23.87,32.4L24.299999999999997,32.4L24.73,32.4L25.16,32.4L25.590000000000003,32.4L26.02,32.4L26.450000000000003,32.4L26.88,32.4L27.310000000000002,32.4L27.740000000000002,32.4L28.17,32.4L28.6,32.4L29.03,32.4L29.46,32.4L29.89,32.4L30.32,32.4L30.75,32.4L31.18,32.4L31.61,32.4L32.04,32.4L32.47,32.4L32.9,32.4L33.33,32.4L33.76,32.4L34.190000000000005,32.4L34.620000000000005,32.4L35.050000000000004,32.4L35.480000000000004,32.4L35.910000000000004,32.4L36.34,32.4L36.77,32.4L37.2,32.4L37.63,32.4L38.06,32.4L38.489999999999995,32.4L38.92,32.4L39.35,32.4L39.78,32.4L40.21,32.4L40.64,32.4L41…………………………. 没有显示图表本身。 svgChart包含svg标签的string。 如果我将svgChart内容（string）直接复制到ejs，它将完美地显示图表。 看起来ejs在加载页面时不能显示标签的内容。它认为svgChart是一个普通的string。 我的问题是：如何使ejs将svgChart识别为svg标签，使其能够显示标签文本的svg图表insead？

将包含文件传递到Handlebars布局

我正在使用Node.js，Express 4和Handlebars模板处理器。 我使用Handlebars渲染的一些页面视图有几个千字节的静态内联SVG代码。 有没有简单的干净的方法把SVG代码放到一个单独的文件中，以包含在Handlebars布局模板中？ 理想情况下，这个包含文件的扩展名是.svg，但是.hbs是可以接受的。

SVGpath优化

我们的项目中有一个由另一个团队制作的JSON文件，这个文件帮助创build了具有绑定的dynamicSVG。 JSON文件的问题是它包含重复和未优化的path。 我已经决定创build一个NodeJS脚本来扫描文件中包含的path并对其进行优化。 未优化path的示例： "paths": [ "M59245.1734326687,2320.0L59266.994415716,2320.0L59266.994415716,2320.0L59306.410931336,2320.0L59306.410931336,2320.0L59345.827446956,2320.0L59345.827446956,2320.0L59385.243962576,2320.0L59385.243962576,2320.0L59424.660478196,2320.0L59424.660478196,2320.0L59464.076993816,2320.0L59464.076993816,2320.0L59503.493509436,2320.0L59503.493509436,2320.0L59542.910025056,2320.0L59542.910025056,2320.0L59582.326540676,2320.0L59582.326540676,2320.0L59621.743056296,2320.0L59621.743056296,2320.0L59633.0477129758,2320.0L59633.0477129758,2320.0L59661.159571916,2320.0L59661.159571916,2320.0L59700.576087536,2320.0L59700.576087536,2320.0L59739.992603156,2320.0L59739.992603156,2320.0L59779.409118776,2320.0L59779.409118776,2320.0L59818.825634396,2320.0L59818.825634396,2320.0L59858.242150016,2320.0L59858.242150016,2320.0L59897.658665636,2320.0L59897.658665636,2320.0L59937.075181256,2320.0L59937.075181256,2320.0L59976.491696876,2320.0L59976.491696876,2320.0L60015.908212496,2320.0L60015.908212496,2320.0L60030.5396230941,2320.0L60030.5396230941,2320.0L60055.324728116,2320.0L60055.324728116,2320.0L60094.741243736,2320.0L60094.741243736,2320.0L60134.157759356,2320.0L60134.157759356,2320.0L60173.574274976,2320.0L60173.574274976,2320.0L60212.990790596,2320.0L60212.990790596,2320.0L60252.407306216,2320.0L60252.407306216,2320.0L60291.823821836,2320.0L60291.823821836,2320.0L60331.240337456,2320.0L60331.240337456,2320.0L60370.656853076,2320.0L60370.656853076,2320.0L60410.073368696,2320.0L60410.073368696,2320.0L60428.0157666062,2320.0M60428.0,2320.0L60428.0044472058,2319.99990189987L60428.0044472058,2319.99990189987" ] 没有重复的path（一半的长度！）： "paths": [ "M59245.1734326687,2320L59266.994415716,2320,59306.410931336,2320,59345.827446956,2320,59385.243962576,2320,59424.660478196,2320,59464.076993816,2320,59503.493509436,2320,59542.910025056,2320,59582.326540676,2320,59621.743056296,2320,59633.0477129758,2320,59661.159571916,2320,59700.576087536,2320,59739.992603156,2320,59779.409118776,2320,59818.825634396,2320,59858.242150016,2320,59897.658665636,2320,59937.075181256,2320,59976.491696876,2320,60015.908212496,2320,60030.5396230941,2320,60055.324728116,2320,60094.741243736,2320,60134.157759356,2320,60173.574274976,2320,60212.990790596,2320,60252.407306216,2320,60291.823821836,2320,60331.240337456,2320,60370.656853076,2320,60410.073368696,2320,60428.0157666062,2320M60428,2320L60428.0044472058,2319.99990189987" ] 在分析结果之后，我得出一个结论，我可以简化路线以减less鞋头线。 所以我决定使用npm package simplify-path来简化每个simplify-path 。 它工作正常： Not simplified: [ [ [ 59245.1734326687, 2320 ] ], [ [ 59266.994415716, 2320 ], [ 59306.410931336, 2320 ], [ 59345.827446956, 2320 ], [ 59385.243962576, 2320 ], [ 59424.660478196, 2320 ], [ 59464.076993816, 2320 ], [ 59503.493509436, […]

如何使用jsDom – node.js来操作svg？

我有以下的svg文件 FileName : seatLayout.svg <?xml version="1.0" encoding="utf-8"?> <!– Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve"> <g id="111"> <rect x="130" y= "130" height="320" […]

我如何运行一个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); […]