玉

Question

我有一个看起来像这样的Jade模板：

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元素和圆圈上的一个缩进级别，它就可以工作。为什么会这样？我想使用容器元素来保存一组将动态创建的圆圈。

编辑：

布局文件是另一个jade文件。上面的玉文件的内容将插入底部附近。

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

剪辑，停止颜色/偏移等在javascript文件中设置。

好吧，我试过Josh的建议。重新设置所有缩进，确保没有尾随空格，甚至在用户设置中设置该选项。仍然是同样的错误。我希望它与快递有关。我尝试使用div来包含当前正在工作的SVG方形图像。那个人也不会在div内部工作。我的结论是以下之一是真的：

1）Jade / Express没有正确渲染SVG元素内的容器元素。

2）在普通HTML文档中使用的典型容器元素（最值得注意的是div和span）在SVG元素期间不起作用。

我应该注意到我找到了this网站，该网站说使用g元素来分组SVG图像。那种方法对我有用。

Answer 1

玉

根据您使用的文本编辑器，我发现由于隐藏的空白问题，jade可能神秘地停止工作。

一种可能的解决方案是清除违规文件中的所有缩进，并为每一行重新添加正确的缩进级别。

我在Atom和Sublime Text中都发生了这种情况。

旁注

在您的布局文件中，您block javascript缩进到与body相同的级别。这将导致HTML输出看起来像这样。

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

我怀疑你不想要那个。

玉模板未正确呈现

1 个答案:

玉

旁注