Neulich spiele ich mit svg in html.
Hier ist ein Basisdreieck gezeichnet. Da die svg nur 400 x 400 ist, das Basisdreieck habe ich maximal 360 gemacht.
Nun muss man nur 360 mit einer kleineren Nummer ersetzen und man hat das Dreick verkleinert.
Hier erst html:
Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<title>Dreieck X</title>
</head>
<body>
<h1>Dreieck X</h1>
<p>
<svg class="tri" xmlns="http://www.w3.org/2000/svg"
width="400"
height="400"
viewBox="-200 -200 400 400"
>
<defs>
<style type="text/css"><![CDATA[
.axes{
fill: none;
stroke: indigo;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 5;
stroke-dasharray: 10 20;
}
.triangle {
fill:red;
stroke:blue;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:3;
}
]]></style>
</defs>
<rect x="-200" y="-200" width="400" height="400" fill="pink"/>
<path class="axes"
d="M 0 -200 V 200 M -200 0 H 200"/>
<path class="triangle"
d="M -180 180 h 360 v -360 l -360 360 ">
</svg>
</p>
</body>
</html>
Und hier Python:
Code: Alles auswählen
html_file = '/home/peterr/temp/svg/dreieck360.html'
savepath = '/home/peterr/temp/svg/dreieckX.html'
with open(html_file) as infile:
html = infile.read()
# 360 ist hier die maximale Größe weil die svg nur 400 x 400 ist, könnte größer gemacht werden
# ersetze 360 mit kleineren Nummern und X mit der Nummer
groesse = input('Eine Nummer < 360 eingeben ... ')
newhtml = html.replace('X', groesse).replace('360', groesse)
newsavepath = savepath.replace('X', groesse)
with open(newsavepath, 'w') as outfile:
outfile.write(newhtml)
# öffne newsavepath in deinem Browser
Nicht genau was du wolltest, weiß ich, aber hat Spaß gemacht!
Ich benutze Vivaldi Browser, darin funktioniert das html einwandfrei.