Django - How can i resize the svg in the html template-CodePudding

I just created a matplot figure from a csv in django (line graph) and rendering it to the html template and I can't modify its dimensions

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 template

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

i tried styling the div in css

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

and it doesnt working only the div container expands but not the svg that just rendered

enter image description here

CodePudding user response：

I'd rather be able to format information, so I hope you don't mind me sticking this here:

xml.etree.ElementTree is a python library that allows you to parse and manipulate svgs.

Side note -> IDK what's happening with the 2 return statements, but I am going to assume I am ignorant as opposed to you being wrong, because presumably your svg is being shown.

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)

Your css should also work, but I think you should be attaching it to the svg itself and not the container. You could always add an !important at the end of it, like so, border: solid black 1px !important;.

Given the information above, you have 2 options; Either use the CSS below or use the etree code and remove the svg {...} css I have below.

If you don't have an id attached to the svg itself, you would have to select it:

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

CodePudding user response：

Try it like this .

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