在Jade模板中包含SVG xml

Question

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

我试过了......

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

...但由于require不存在而失败。

Answer 1

我想有两种方法可以达到这个目的。后者只是显示直接的方式，以防不使用mixins是可以接受的。第一个解决方案包含了您的方法：

答：将变量require或fs传递给您的玉石模板

确保在玉器模板解析期间所需的功能可用（作用域）。假设你正在使用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')

B：或者只使用include（不含mixins）

Jade能够包含其他类型的内容，所以简单

div
  include images/my-logo.svg

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

Answer 2

以上答案可行，但如果您想要内联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.

Answer 3

我对object好运，例如 a.svg(href='/') object(type="image/svg+xml" data="/img/#{data.menu.img}.svg") | #{data.menu.title}