Включить SVG xml в шаблон Jade

Ответ 1

Наверное, есть два способа добиться этого. Последний, просто показывает прямой способ, если вы не используете mixins. Первое решение завершает ваш подход:

A: require переменная Pass или fs для вашего шаблона нефрита

Убедитесь, что необходимые функции доступны (в области) во время разбора шаблона jade. Предполагая, что вы используете выражение, это может выглядеть так:

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' } в качестве локального шаблона нефрита и использовать свой оригинальный код mixin. Обратите внимание, что в любом случае вам нужно отключить вывод с помощью != Для переноса разметки SVG, чтобы он интерпретировался и отображался вместо отображения в виде (HTML) текста. Также имейте в fs что fs живет в вашем коде приложения/контроллера, и пути должны быть выражены относительно него, например:

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

B: Или просто используйте include (без mixins)

Джейд способен включать в себя другой тип содержимого, поэтому простой

div
  include images/my-logo.svg

делает эту работу также. К сожалению, это не работает динамически, поэтому вы не можете включать файлы с использованием переданных переменных в mixins. Но: до тех пор, пока вы не планируете обогащать свой микшинг дополнительной логикой, это решение даже не производит (путь) больше кода.

Ответ 2

Выше ответы работают, но если вы хотите сделать SVG inline. Вы можете сделать это так.

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

Ответ 3

Мне повезло с object, например, object a.svg(href='/') object(type="image/svg+xml" data="/img/#{data.menu.img}.svg") | #{data.menu.title} a.svg(href='/') object(type="image/svg+xml" data="/img/#{data.menu.img}.svg") | #{data.menu.title}