Django模板SVG渲染遇TemplateSyntaxError错误求助

错误原因 #

Django模板引擎不支持在模板中直接对列表索引进行算术运算（比如i-1），所以val[i-1].x_d这种写法会触发TemplateSyntaxError。

解决方案 #

方案1：视图层预处理数据（推荐）

在视图函数中提前生成相邻点的配对数据，直接传给模板循环，避免模板中做复杂运算：

# 视图函数示例
def your_view(request):
    val = [...]  # 你已确认存在的4个数据项
    # 生成相邻点对：(val[0], val[1]), (val[1], val[2]), (val[2], val[3])
    point_pairs = list(zip(val[:-1], val[1:]))
    return render(request, 'your_template.html', {'point_pairs': point_pairs})

模板中修改循环逻辑：

<svg id="tower_layout" width="400" height="400" style="border: 1px solid black;" xmlns="http://www.w3.org/2000/svg">
  <rect width="398" height="398" x="1" y="1" fill="#e4e4e7" />
  <text x="200" y="20" stroke="black" font-size="15" text-anchor="middle">Tower Diagram</text>
  {% for prev_point, curr_point in point_pairs %}
    <line x1="{{ prev_point.x_d }}" y1="{{ prev_point.y_d }}" x2="{{ curr_point.x_d }}" 
      y2="{{ curr_point.y_d }}" stroke-width="1" stroke="black" />
  {% endfor %}
</svg>

方案2：自定义模板过滤器（模板层处理）

如果必须在模板中计算索引，需要自定义两个模板过滤器来实现索引取值和属性获取：

1. 在你的Django应用下创建templatetags/custom_filters.py文件：

from django import template

register = template.Library()

@register.filter
def get_item(lst, index):
    try:
        return lst[index]
    except (IndexError, TypeError):
        return ''

@register.filter
def get_attr(obj, attr_name):
    try:
        return getattr(obj, attr_name)
    except AttributeError:
        return ''

2. 在模板顶部加载过滤器：

{% load custom_filters %}

3. 修改模板中的循环代码：

<svg id="tower_layout" width="400" height="400" style="border: 1px solid black;" xmlns="http://www.w3.org/2000/svg">
  <rect width="398" height="398" x="1" y="1" fill="#e4e4e7" />
  <text x="200" y="20" stroke="black" font-size="15" text-anchor="middle">Tower Diagram</text>
  {% for i in val_range %}
    {% if i > 0 %}
      {% with prev_index=i|add:"-1" %}
        <line x1="{{ val|get_item:prev_index|get_attr:'x_d' }}" y1="{{ val|get_item:prev_index|get_attr:'y_d' }}" 
          x2="{{ val|get_item:i|get_attr:'x_d' }}" y2="{{ val|get_item:i|get_attr:'y_d' }}" 
          stroke-width="1" stroke="black" />
      {% endwith %}
    {% endif %}
  {% endfor %}
</svg>

内容的提问来源于stack exchange，提问作者WV_Mapper