Django中如何调整HTML模板里Matplotlib生成的SVG尺寸？

问题背景 #

在Django项目中，基于CSV数据用Matplotlib生成折线图，导出为SVG后渲染到HTML模板，为容器div设置CSS尺寸后，仅容器缩放，SVG本身尺寸未随之调整。

后端代码 #

imgdata = io.StringIO()
fig.savefig(imgdata, format='svg')
imgdata.seek(0)
data = imgdata.getvalue()
return data
data = isolate(selected_loc)
return render(request, 'hello.html', {'data': data, 'locations' : list(locations)})

HTML模板代码 #

<div class="figure" style="">{{ data|safe }}</div>

尝试过的无效CSS #

.figure {
    width: 40%;
    height: 500px;
}

解决方法 #

方法1：生成SVG时指定自适应参数 #

在Matplotlib生成图表阶段，直接设置figure尺寸，并让SVG支持缩放：

# 创建figure时指定基础尺寸（单位：英寸）
fig = plt.figure(figsize=(8, 4))
# 执行你的折线图绘制逻辑...

# 保存SVG时添加参数，移除多余空白并支持自适应
imgdata = io.StringIO()
fig.savefig(imgdata, format='svg', bbox_inches='tight', transparent=True)
imgdata.seek(0)
data = imgdata.getvalue()

方法2：用CSS强制SVG继承容器尺寸 #

直接为SVG元素添加样式，覆盖其自带的固定宽高属性：

.figure {
    width: 40%;
    height: 500px;
}
/* 强制SVG占满容器 */
.figure svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

方法3：为SVG添加viewBox实现自适应 #

SVG的viewBox属性是自适应缩放的核心，它定义了SVG的坐标范围，结合百分比宽高可实现随容器缩放。可在后端处理SVG数据时添加该属性：

from xml.etree import ElementTree as ET

imgdata.seek(0)
tree = ET.parse(imgdata)
root = tree.getroot()

# 获取SVG原有的宽高值
original_width = root.attrib.get('width', '640')
original_height = root.attrib.get('height', '480')

# 添加viewBox属性，设置坐标范围为0 0 原宽 原高
root.set('viewBox', f'0 0 {original_width} {original_height}')
# 将宽高设为百分比，移除固定值
root.set('width', '100%')
root.set('height', '100%')

# 重新生成SVG字符串
imgdata = io.StringIO()
tree.write(imgdata, encoding='unicode')
imgdata.seek(0)
data = imgdata.getvalue()

内容的提问来源于stack exchange，提问作者Gabe Fletcher Sanchez