使用可以在浏览器中呈现的 Node/Restify 返回生成的 SVG？

Question

我目前正在向现有节点添加新的 GET 端点 (v8.11.2 ) + Restify (^7.6.0) 服务，目标是根据查询参数生成自定义 SVG。

到目前为止，我已经通过将端点作为响应发送回浏览器中 return svg 文本：

res.send('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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> ');

所以我认为这是一个内容类型问题并尝试了两种方法

res.header('Content-Type', 'image/svg');

和

res.header('Content-Type', 'image/svg+xml');

在使用 svg 内容调用 res.send 之前，但浏览器尝试下载图像而不是渲染它。

我也尝试过使用 url 作为图像源的准系统 html 页面没有成功，如下所示：

<html>
  <head></head>
  <body>
    <img src="http://localhost:8080/marker/svg" alt="">
  </body>
</html>

这是一个精简的基本服务器，仍然存在相同的问题：

var restify = require('restify');

function respond(req, res, next) {
  res.header('Content-Type', 'image/svg+xml');
  res.send('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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> ');
}

var server = restify.createServer();
server.get('/', respond);

server.listen(8080, function() {
  console.log('%s listening at %s', server.name, server.url);
});

我希望能够在浏览器中点击 localhost:8080/api/svg 并查看 svg，就像我直接 opened/served 一个 svg 文件一样。提前致谢！

Answer 1

使用 sendRaw() 而不是 send()。 send() 过滤你的数据内容。

使用可以在浏览器中呈现的 Node/Restify 返回生成的 SVG？

Returning a generated SVG using Node/Restify that can render in browser?

javascript

svg

node.js

restify