J'ai un modèle Jade qui ressemble à ceci:modèle Jade pas rendu correctement

extend layout  
    svg#testing 
    defs 
     pattern#flowers(patternUnits="userSpaceOnUse" width='276px' height='183px') 
     image(xlink:href='/img/flowers.jpg', height='183px' width='276px') 
    div 
     circle#circle(cx=50 cy=50 r=10 fill='url(#flowers)')

L'élément de cercle ne soit pas rendu dans cet état. Cependant, si je supprime l'élément div et un niveau d'indentation sur le cercle cela fonctionne. Pourquoi cela arrive-t-il? Je voulais utiliser un élément conteneur pour contenir un groupe de cercles qui seront créés dynamiquement.

Edit:

Le fichier de mise en page est un autre fichier de jade. Le contenu du fichier jade ci-dessus serait inséré près du bas.

doctype html 
html 
    head 
    title= appTitle 
    link(rel="stylesheet", href="/css/style.css") 
    link(rel="stylesheet" href="/css/jquery-ui.css") 
    link(rel="stylesheet", href="/css/jquery-ui.theme.min.css")  
    body 
    block page 
    div.menu 
     include includes/menu 
    img(src="/img/black.jpg", id="poker") 
    svg#SVG 
     defs 
     linearGradient#grad1 
     clipPath#clipping 
      path#clipped 
     rect#svgMenu(width="100%", height="100%", style="clip-path:url(#clipping); fill:url(#grad1);")   
    h2= appTitle 
    block gameboard 
    block javascript 
    include includes/scripts

Le clipath, stop-color/décalages, etc sont définis dans un fichier javascript.

Eh bien, j'ai essayé ce que Josh a suggéré. Re-réglage de tous les retraits, en s'assurant qu'il n'y a pas d'espace blanc de fin, même en réglant cette option dans les paramètres de l'utilisateur. Toujours le même bug. Je pense que cela a quelque chose à voir avec express. J'ai essayé d'utiliser un div pour contenir l'image carrée SVG qui fonctionne actuellement. Celui-là ne fonctionne pas non plus à l'intérieur d'un div. Ma conclusion est que l'un des suivants est vrai:

1) Jade/Express ne rend pas correctement les éléments du conteneur à l'intérieur des éléments SVG.

2) Les éléments de conteneur typiques (notamment div et span) que vous utiliseriez dans les documents HTML normaux ne fonctionnent pas dans la période des éléments SVG.

Je devrais noter que j'ai trouvé this site qui dit d'utiliser des éléments g pour regrouper les images SVG. Cette méthode a fonctionné pour moi.

Source

2015-04-17 user3619165

Fonctionne bien ici. Pouvez-vous montrer votre fichier 'layout' et votre sortie Jade? –

Jade

Selon l'éditeur de texte que vous utilisez, j'ai trouvé que le jade peut arrêter mystérieusement travailler en raison de problèmes d'espace blanc cachés.

Une solution possible consiste à supprimer tous les indentations dans le fichier incriminé et à rajouter les niveaux de retrait corrects à chaque ligne. Je l'ai fait se produire à la fois dans Atom et Sublime Text.

Side Note

Dans votre fichier de mise en page, vous avez block javascript dentelée au même niveau que body. Cela entraînera une sortie HTML qui ressemble à ceci.

<html> 
    <head></head> 
    <body></body> 
    <script></script> 
</html>

Je suppose que vous ne le souhaitez pas.

Source

2015-04-18 03:11:18 JoshWillik

C'est un bloc JavaScript. L'include/scripts est un autre fichier jade avec une liste de tags de script. Je vais essayer votre suggestion d'espace blanc puis faire un rapport. – user3619165

Répondre

Jade

Side Note

Questions connexes