如何在Django模板中正确插值参数？SVG坐标计算异常求助

问题原因 #

你当前的写法只是将forloop.counter0的数值与* 3rem字符串直接拼接，Django模板不会执行乘法运算，最终浏览器拿到的是类似0 * 3rem这类无效的数值表达式，解析时会忽略非数字部分，导致x值始终为0。

解决方案 #

方法1：原生Django模板实现（无需第三方库） #

利用add过滤器通过多次加法实现乘法效果（3倍即加3次自身），再拼接单位：

<svg class="wave α-wave">
    {% for i in '0000000000000'|make_list %}
        {% with x_val=forloop.counter0|add:forloop.counter0|add:forloop.counter0 %}
            <rect width="3rem" height="0.5rem" x="{{ x_val }}rem"></rect>
        {% endwith %}
    {% endfor %}
</svg>

方法2：视图层预计算（更简洁） #

在视图中生成包含索引的列表，直接传递到模板使用：

# 视图函数示例
def your_view(request):
    # 生成13个元素的索引列表（对应原模板中13个0的数量）
    wave_indices = range(13)
    return render(request, 'your_template.html', {'wave_indices': wave_indices})

模板中直接使用预计算的数值：

<svg class="wave α-wave">
    {% for index in wave_indices %}
        <rect width="3rem" height="0.5rem" x="{{ index * 3 }}rem"></rect>
    {% endfor %}
</svg>

方法3：使用第三方模板过滤器（推荐，适合复杂运算） #

安装django-mathfilters库，使用mul过滤器直接做乘法：

1. 安装库：

pip install django-mathfilters

2. 在settings.py中添加应用：

INSTALLED_APPS = [
    # ... 其他应用
    'mathfilters',
]

3. 模板中使用：

{% load mathfilters %}

<svg class="wave α-wave">
    {% for i in '0000000000000'|make_list %}
        <rect width="3rem" height="0.5rem" x="{{ forloop.counter0|mul:3 }}rem"></rect>
    {% endfor %}
</svg>

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