Inclure du SVG xml dans le modèle Jade

Est-il possible de créer un Jade mixin, qui lit un fichier du système de fichiers et les échos dans le rendu HTML?

J'ai essayé ce...

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

... mais il échoue car require n'existe pas.

OriginalL'auteur Billy Moon | 2014-05-28

  1. 21

    Je pense qu'il y a deux façons d'y parvenir. Celui-ci montre le droit chemin en cas de non utilisation de mixin est acceptable pour vous. La première solution, enveloppements votre approche:

    Un: Pass variable require ou fs à votre modèle jade

    Assurez-vous que les fonctions nécessaires sont disponibles (étendue) au cours de jade modèle d'analyse. En supposant que vous êtes en utilisant exprimer cela pourrait ressembler à ceci:

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

    Maintenant votre mixin devrait travailler avec les deux modifications mineures:

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

    Vous pouvez même passer juste { require: 'require' } comme un local pour le modèle jade et l'utilisation de votre original mixin code. Notez que dans tous les cas vous devez supprimer de s'échapper de la sortie avec != afin de transférer SVG balisage de sorte qu'il est interprété et rendu au lieu d'être affiché comme (HTML) du texte. Sachez également que fs vie de votre app/code de contrôleur et les chemins d'accès doivent être exprimée par rapport à ça, par exemple:

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

    B: Ou utilisez simplement inclure (sans mixin)

    Jade est capable d'inclure d'autres types de contenus, de sorte qu'un simple 

    div
  include images/my-logo.svg

    fait ce travail. Malheureusement cela ne fonctionne pas de manière dynamique, de sorte que vous ne pouvez pas inclure de fichiers à l'aide transmis variables à l'intérieur de mixin. Mais: aussi longtemps Que vous n'avez pas l'intention d'enrichir votre mixin avec de la logique supplémentaire, cette solution n'a même pas de produire (moyen) plus de code.

    Vous n'avez pas besoin != dans la div dans le cas B, puisque vous d'inclure le fichier à l'intérieur de la div que partielle.
    Merci pour cette correction, j'ai enfin résolu ce problème!

    OriginalL'auteur matthias

  2. 1

    Réponses ci-dessus n'travail, mais si vous voulez faire un SVG en ligne. Vous pouvez le faire comme ceci.

    //- 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.
    Ne pas répondre à la question d'origine, mais c'est ce dont j'avais besoin. Cela fonctionne très bien avec les résultats que vous pouvez obtenir à partir de fontawesome.com/how-to-use/server-side-rendering qui vous permet d'utiliser les icônes sans avoir à installer de fontawesome choses. Bien sûr, doit indiquer les icônes venus et l'honneur de la licence, je suppose.

    OriginalL'auteur Ahmad Awais

  3. 0

    J'ai plus de chance avec object, tels que

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

    Comme une solution générale pour l'affichage de svg avec des scripts de contenu, c'est ce que je fais, mais l'op est de demander spécifiquement, y compris le contenu du fichier xml dans le jade de sortie, de sorte que cela ne s'applique pas.

    OriginalL'auteur tomByrer