我有一個玉的模板，看起來是這樣的：玉模板不正確呈現

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

圓元素沒有得到呈現這種狀態。但是，如果我刪除了div元素和其工作的圓上的一個縮進級別。這是爲什麼發生？我想使用容器元素來容納一組將被動態創建的圓圈。

編輯：

佈局文件是另一個玉文件。上面的玉文件的內容將被插入底部附近。

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

clipath，停止顏色/偏移量等設置在JavaScript文件中。

呃，我試過喬什建議的。重新設置所有縮進，確保沒有結尾空白，甚至在用戶設置中設置該選項。仍然是同樣的錯誤。我期望它與快遞有關。我嘗試使用div來包含當前正在工作的SVG方形圖像。那個也不適用於div。我的結論是，以下情況之一爲真：

1）Jade/Express無法正確呈現SVG元素內的容器元素。

2）在常規HTML文檔中使用的典型容器元素（最顯着的是div和span）在SVG元素期間不起作用。

我應該注意到，我確實發現this網站，它說使用g元素來分組SVG圖像。該方法對我有用。

來源

2015-04-17 user3619165

這裏工作正常。你能顯示你的'佈局'文件和Jade輸出嗎？ –

玉

根據您使用文本編輯器，我發現，玉能神不知鬼不覺停止，因爲隱藏的白色空間問題的工作。

一個可能的解決方案是清除有問題的文件中的所有縮進，並將正確的縮進級別重新添加到每一行。

我在Atom和Sublime Text中都發生過這種情況。

旁註

在你的佈局文件，你必須block javascript縮進到同一水平body。這將導致看起來像這樣的HTML輸出。

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

我懷疑你不想那樣。

來源

2015-04-18 03:11:18 JoshWillik

這是塊JavaScript。 include/scripts是另一個帶有腳本標記列表的玉文件。我會嘗試您的空白空間建議，然後回報。 – user3619165

玉模板不正確呈現

回答

玉

旁註

相關問題