Javascript 在Jade模板中包含svgxml

是否可以创建一个Jade mixin，它从文件系统读取一个文件，并将其回显到呈现的HTML中

我试过这个

mixin svg(file)
    - var fs = require("fs");
    - var xml = fs.readFileSync(file)
    div= xml

---

。。。但是它失败了，因为

require

不存在。

我想有两种方法可以实现这一点。后一种方法只是在不使用mixin对您来说是可以接受的情况下直接显示方法。第一个解决方案总结了您的方法：

答：将变量

require

或

fs

传递到您的jade模板 确保在jade模板解析过程中所需的函数可用（作用域）。假设您使用的是express，则可能如下所示：

app.get('/', function(req,res) {
  res.render('portfolio.jade', {
    title: 'svg with jade test',
    fs: require('fs')
  })
});

现在，您的mixin需要进行两个小的修改：

mixin svg(file)
  - var xml = fs.readFileSync(file)
  div!= xml

您甚至可以将

{require:'require'}

作为jade模板的本地传递，并使用原始的mixin代码。请注意，在任何情况下都必须禁止使用

转义输出=

以传输SVG标记，从而对其进行解释和呈现，而不是显示为（HTML）文本。还要注意，

fs

存在于您的应用程序/控制器代码中，并且必须表示与之相关的路径，例如：

mixin('public/images/my-logo.svg')

或者只使用include（不含mixin） 玉可以包含其他类型的内容，因此

div
  include images/my-logo.svg

---

这项工作也做得很好。不幸的是，这不能动态工作，因此不能在mixin中包含使用传递的变量的文件。但是：只要你不打算用额外的逻辑来丰富你的mixin，这个解决方案甚至不会产生更多的代码

我对

对象的运气更好，比如

  a.svg(href='/')
    object(type="image/svg+xml" data="/img/#{data.menu.img}.svg")
      | #{data.menu.title}

上面的答案确实有用，但如果您想使用SVG内联。你可以这样做

//- Cover.
.ywp_title
    h1
        | Some text
        span
            | More Span Text
            svg.bg_svg(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 430 100" style="enable-background:new 0 0 430 100;" xml:space="preserve")
                g(style="fill: #BADA55;")
                    path(style="fill: pink;" class="public-spaces-bg-fill" d="M356.2,60.1C356.2,60.1,356.2,60.1,356.2,60.1c0.1,0,0.1,0,0.2,0C356.3,60.1,356.3,60.1,356.2,60.1 M424.4,73.2c0-2.8-2-6.1-3.2-9.8c-2-5.8-4-11.7-6.3-17.5c-0.1-0.2-0.1-0.3-0.2-0.5c0,0,0,0,0,0v0c-0.7-1.4-1.8-2.4-3.4-3.1 c-12-5.5-26.3-7.4-40.3-8.6c18,0.1,36,0.4,54,0.6c-0.6,0-4.5-13.4-4.9-14.3c-0.4-1-4.1-14.2-5.2-14.2C380.4,5.4,345.8,5,311.3,5.1 c-66.5,0.2-133.3,1.8-199.3,9.8c-20.8,2.5-41.7,5.4-62.2,9.6c-2.1,0.4-4.2,0.9-6.4,1.3l-17.7,4.4c-1.1,0.3-2.3,0.7-3.4,1.1 c-5.1,1.7-12.1,3.6-15.7,7.8c-1.2,1.4-1.7,2.8-1.2,4.6c0.3,1,0.7,2,1,3.1C13,71.7,18.1,75.5,20.1,76.6c7.7,4.1,16.4,6,25,7.5 c43.4,7.7,88,9.4,132.1,10.3c44.7,0.9,89.5,0.2,134.1-1.8c21.6-1,43.2-2.3,64.6-5c14.1-1.8,31.6-2.6,44.6-9.1 C423.3,76.9,424.4,75.2,424.4,73.2c0,0.1,0.1,0.2,0.1,0.2C424.5,73.4,424.4,73.3,424.4,73.2")
        | and more text.

你不需要
=在案例B中的div中，因为您将文件作为部分包含在div中。@user61382谢谢您的更正，我终于解决了这个问题！作为一个用脚本内容显示svg的通用解决方案，我就是这么做的，但是op特别要求在jade输出中包含xml内容，所以这并不适用。没有回答最初的问题，但这正是我需要的。这是一个伟大的作品，你可以从中得到的结果，允许你使用内置的图标，而无需安装任何东西。当然，我想应该指明图标的来源并遵守许可证。