使用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, " ")); }); }); 

在不设置res.header() ，我可以在浏览器中访问路由，并且按照预期运行（缩放以适应）。 不幸的是，除非设置了标题，否则我不能将它们embedded到<img>标记中。

使用res.header()设置，我可以将图像embedded到<img>标记中，但不像我所期望的那样（静态大小）。

直接用res.sendFile(iconPath)发送文件可以正常工作。 我想知道是否这是因为该文件需要作为一个二进制文件，可以在res.send(new Buffer(svg, 'binary'))看到，但这与res.send(svg)具有相同的效果。

语句console.log(svg)输出以下代码：

 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <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" viewbox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve"> <style type="text/css"> .st0{fill:#49C5B1;} </style> <title>Icons_TEST</title> <g id="Example"> <path {{{REMOVED FOR STACKOVERFLOW POST}}}/> </g> </svg> 

我可以想到一个解决方法，将文件保存到临时目录，并使用res.sendFile(tempPath) ，但必须有一个更好的办法…

以下是响应标题的示例：

 HTTP/1.1 200 OK X-Powered-By: Express Content-Type: image/svg+xml Date: Thu, 20 Oct 2016 00:51:18 GMT Connection: keep-alive Content-Length: 3577 

Answer 1

在Express github页面中提出这个问题之后，一个用户表示他们对svgProcessor是一个潜在的问题感到好奇。 相信问题与服务的方式有关，我试图通过直接使用res.render(fs.readFileSync(iconPath))渲染svg来消除这个问题。 令我惊讶的是，这实际上是按预期呈现的。

我盯着svgProcessor的输出很长一段时间，看不出差异，所以我通过在线比较工具运行它，结果如下：

即使在我面前的答案，我仍然没有看到问题是什么。 然后我意识到， viewBox中的B是低层的！ 这是由于一个名为Cheerio的包（我正在使用它来遍历svg节点）来规范属性。

解决scheme： var $ = cheerio.load(svg, { xmlMode: true } );