matplotlib Django -如何调整html模板中svg的大小

vohkndzv  于 2022-12-27  发布在  Go
关注(0)|答案(2)|浏览(135)

我刚刚在django中从csv创建了一个matplot图形(线图),并将其渲染到html模板中,我不能修改它的尺寸

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设计div的样式

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

而且它不起作用,只有div容器展开,而不是刚刚呈现的svg
enter image description here

ffscu2ro

ffscu2ro1#

我宁愿能够格式化信息,所以我希望你不介意我坚持在这里:
xml.etree.ElementTree是一个python库,允许您解析和操作SVG。
旁注-〉IDK 2个return语句发生了什么,但是我将假设我是无知的,而不是你错了,因为你的svg可能正在显示。

import xml.etree.ElementTree as ET
from io import StringIO

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)})

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

# whatever the namespace is typically "http://www.w3.org/2000/svg"
# elements are the elements you are looking for
for e in root.findall("{namespace}elements"):
    e.attrib["attribute_to_set"] = ""

root.attrib["height"] = "100%"
root.attrib["width"] = "100%"

# tree.write() saves the file so you can write it to a BytesIO or StringIO
# the below should work.
tree.write(imgdata)

你的css也应该可以工作,但是我认为你应该把它附加到svg本身而不是容器上,你可以在它的末尾加上一个!important,就像border: solid black 1px !important;
鉴于上述信息,您有两个选项:要么使用下面的CSS,要么使用etree代码并删除我下面的svg {...} CSS。
如果你没有一个id附加到svg本身,你必须选择它:

svg
{
    width: 100%;
    /*height: 100%;*/
}
.container
{
    width: 40%;
    height: 500px;
}
baubqpgj

baubqpgj2#

像这样试试。

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="your path"></svg>

相关问题