CODEWITHSUNDEEP
svgpug
user3619165
user3619165

Reputation: 408

Jade template not rendered correctly

I have a Jade template that looks something like this :

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)')

The circle element does not get rendered in this state. However, if I remove the div element and one level of indentation on the circle it works. Why is this happening? I wanted to use a container element to hold a group of circles that will be dynamically created.

Edit :

The layout file is another jade file. The contents of the above jade file would be inserted near the bottom. 

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

The clipath, stop-color/offsets, etc are set in a javascript file.

Well, I tried what Josh suggested. Re-setting all the indents, making sure there is no trailing white space, even setting that option in user settings. Still the same bug. I expect it has something to do with express. I tried using a div to contain the SVG square image that is currently working. That one doesn't work inside of a div either. My conclusion is that one of the following is true :

1) Jade/Express doesn't correctly render container elements inside of SVG elements.

2) Typical container elements (most notably div and span) that you would use in normal HTML documents don't work in SVG elements period.

I should note that I did find this site which says to use g elements to group SVG images. That method did work for me.

Upvotes: 0

Views: 892

Answers (1)

JoshWillik
JoshWillik

Reputation: 2645

Jade

Depending on the text editor you use, I have found that jade can mysteriously stop working because of hidden white space problems.

One possible solution is to clear all indenting in the offending file, and re-add the correct indent levels to each line.

I have had this happen in both Atom and Sublime Text.

Side Note

In your layout file, you have block javascript indented to the same level as body. This will result in an HTML output that looks like this.

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

I suspect you don't want that.

Upvotes: 0

Related Questions