渲染SVG文件并使用Express提供它。

Question

我希望了解如何使用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>

当我访问该路由时，SVG文件的原始XML将被发送到浏览器。如何首先将其呈现为SVG图像，然后再进行发送？

- mc9

---

浏览器先渲染它，你不需要先渲染它。 - Robert Longson

Answer 1

将您的SVG文件修改为以下内容

<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>

- user5283155

---

说明：这些(XMLNS)属性定义了命名空间，浏览器需要它们来识别标记语言是SVG，而不是其他规范中的某个SVG元素（尽管可能性很小）。 - Robert Longson

Answer 2

如果你认为“渲染”是指如何创建和提供一个动态生成的SVG，那么你的代码可能像这样工作：

let svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400">
  <rect width="100%" height="100%" fill="red"/>
  <text x="50%" y="50%" text-anchor="middle">${String(Math.random())}</text>
</svg>`;

router.get("/render-svg", (req, res, next) => {
    res.writeHead(200, {
      'Content-Type': 'image/svg+xml',
      'Content-Length': svg.length
    });
    res.end(svg);
});

- ow3n