django-如何在HTML模板中调整SVG大小

Question

I刚刚从DJANGO（line Graph）中的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

输入图像描述在这里

Answer 1

是一个Python库，可让您解析和操纵SVG。 side Note-> IDK 2个返回陈述发生了什么，但是我会假设我无知而不是您错了，因为大概是您的SVG。

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


    # this will write the output of the figure into a string in an SVG format
    # this might've been the user defined function "isolate"
    imgdata = io.StringIO()
    fig.savefig(imgdata, format='svg')
    imgdata.seek(0)
    data = imgdata.getvalue()
    return data
    # this looks like it went into another function somewhere

    # then this looks like it was in a view
    data = isolate(selected_loc)
    return render(request, 'hello.html', {'data': data, 'locations' : list(locations)})


# create a tree
tree = ET.parse(imgdata)
# get the root
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"] = ""

# set the "root" css values for height and width
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)
# then do more things with it

您的CSS也应该起作用，但我认为您应该将其附加到SVG本身而不是容器上。某些样式有可能优先于您要应用的样式，因此您可以随时在其中添加

!important

通过上述信息，您有2个选项；要么使用下面的CSS，要么使用

border: solid black 1px !important;

代码，然后删除我在下面拥有的

etree

cs。

如果您没有SVG本身的ID，则必须选择它：svg {...}

---

this这样。

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