javascript 在 Jade 模板中包含 SVG xml
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23907512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Include SVG xml in Jade template
提问by Billy Moon
Is it possible to create a Jade mixin, which reads a file from the file system, and echoes it into the rendered HTML?
是否可以创建一个 Jade mixin，它从文件系统中读取一个文件，并将其回显到呈现的 HTML 中？
I tried this...
我试过这个...
mixin svg(file)
- var fs = require("fs");
- var xml = fs.readFileSync(file)
div= xml
... but it fails because requiredoes not exist.
...但它失败了，因为require不存在。
回答by matthias
I guess there are two ways to achieve this. Latter one just shows the straight way in case not using mixins is acceptable for you. The first solution wraps up your approach:
我想有两种方法可以实现这一目标。后一个只是显示了直接的方法，以防您可以接受不使用 mixin。第一个解决方案总结了您的方法：
A: Pass variable requireor fsto your jade template
A：将变量require或传递fs给您的玉石模板
Make sure that the needed functions are available (scoped) during jade template parsing. Assuming you're using express this might look like this:
确保在玉模板解析期间所需的功能可用（范围）。假设您正在使用 express，这可能如下所示：
app.get('/', function(req,res) {
res.render('portfolio.jade', {
title: 'svg with jade test',
fs: require('fs')
})
});
Now your mixin should work with two minor modifications:
现在你的 mixin 应该有两个小的修改：
mixin svg(file)
- var xml = fs.readFileSync(file)
div!= xml
You can even just pass { require: 'require' }as a local to the jade template and use your original mixin code. Note that in any case you have to suppress escaping the output with !=in order to transfer SVG markup so that it is interpreted and rendered instead of being displayed as (HTML) text. Also be aware that fslives in your app/controller code and paths must be expressed relative to it, e.g.:
您甚至可以仅将{ require: 'require' }本地传递给 jade 模板并使用您的原始 mixin 代码。请注意，在任何情况下，您都必须禁止转义输出!=以传输 SVG 标记，以便对其进行解释和呈现，而不是显示为 (HTML) 文本。另请注意，fs您的应用程序/控制器代码和路径必须相对于它表示，例如：
mixin('public/images/my-logo.svg')
B: Or just use include (without mixins)
B: 或者直接使用 include（不带 mixins）
Jade is capable of including other type of contents, so a simple
Jade 能够包含其他类型的内容，所以一个简单的
div
include images/my-logo.svg
does this job as well. Unfortunately this doesn't work dynamically, so you cannot include files using passed variables within mixins. But: As long as you're not planning to enrich your mixin with additional logic, this solution doesn't even produce (way) more code.
也做这项工作。不幸的是，这不能动态工作，因此您不能在 mixin 中使用传递的变量来包含文件。但是：只要你不打算用额外的逻辑来丰富你的 mixin，这个解决方案甚至不会产生（方式）更多的代码。
回答by Ahmad Awais
Above answers do work but if you want to do an SVG inline. You can do it like this.
上面的答案确实有效，但如果你想做一个 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.
回答by tomByrer
I have better luck with object, such as
a.svg(href='/')
object(type="image/svg+xml" data="/img/#{data.menu.img}.svg")
| #{data.menu.title}
我有更好的运气object，例如
a.svg(href='/')
object(type="image/svg+xml" data="/img/#{data.menu.img}.svg")
| #{data.menu.title}
