在Django模板中基于字典键值及索引为SVG元素分配类是否可行？

当然可行！咱们可以通过添加一个自定义模板过滤器来解决按索引获取元组元素的问题，再结合你已有的过滤器就能实现需求。下面是具体步骤：

1. 添加获取元组元素的自定义过滤器 #

首先在你的模板过滤器文件中新增一个过滤器，用来根据索引取出元组中的元素：

@register.filter(name='get_tuple_item')
def get_tuple_item(tpl, index):
    try:
        # 确保索引是整数，返回对应位置的布尔值
        return tpl[int(index)]
    except (IndexError, TypeError, ValueError):
        # 如果元组不存在、索引无效，默认返回False
        return False

这个过滤器会处理异常情况，避免模板渲染时出错。

2. 在模板中实现逻辑 #

接下来在Django模板里编写遍历逻辑，注意先把字符串格式的list_upper转成列表（如果你的视图没提前转的话，可以用Django内置的split过滤器）：

{% for x in list_upper|split:" " %}
    {% with area_tuple=area_stats|get_dict_value:x %}
        <!-- 判断当前x是否是area_stats的键 -->
        {% if area_tuple %}
            <!-- Top 路径：对应元组索引0 -->
            <path class="{% if area_tuple|get_tuple_item:0 %}highlight{% else %}no_highlight{% endif %}" 
                  d="...">
            <!-- Right 路径：对应元组索引1 -->
            <path class="{% if area_tuple|get_tuple_item:1 %}highlight{% else %}no_highlight{% endif %}" 
                  d="...">
            <!-- Bottom 路径：对应元组索引2 -->
            <path class="{% if area_tuple|get_tuple_item:2 %}highlight{% else %}no_highlight{% endif %}" 
                  d="...">
            <!-- Left 路径：对应元组索引3 -->
            <path class="{% if area_tuple|get_tuple_item:3 %}highlight{% else %}no_highlight{% endif %}" 
                  d="...">
            <!-- Center 椭圆：对应元组索引4 -->
            <ellipse class="{% if area_tuple|get_tuple_item:4 %}highlight{% else %}no_highlight{% endif %}" 
                     cx="..." cy="..." rx="..." ry="...">
        {% else %}
            <!-- 如果x不在area_stats中，所有元素都用no_highlight -->
            <path class="no_highlight" d="...">
            <path class="no_highlight" d="...">
            <path class="no_highlight" d="...">
            <path class="no_highlight" d="...">
            <ellipse class="no_highlight" cx="..." cy="..." rx="..." ry="...">
        {% endif %}
    {% endwith %}
{% endfor %}

3. 优化建议 #

• 如果list_upper在视图中可以提前处理成列表（比如list_upper = list_upper.split()），就不需要在模板中用split过滤器了，这样渲染效率更高。
• 可以把元组索引对应的位置名称（top/right等）用变量存起来，让模板更易读，比如：

  {% with top=0 right=1 bottom=2 left=3 center=4 %}
      <!-- 这里复用这些索引变量 -->
  {% endwith %}
  

这样就能完美实现你想要的：遍历列表元素，根据字典中对应元组的布尔值为SVG元素分配样式类啦！

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