05. Jupyter Notebook¶
ehemalige Veranstaltungen ia3.netz + ia3.data sowie ia4.Netz im Studiengang Interaktive Medien
(c) 2020/2021 Hochschule Augsburg - Fakultät für Informatik - Prof.Dr.Nik Klever
In [3]:
svgCat = """<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="140" height="170"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<circle cx="70" cy="95" r="50" style="stroke:black; fill:none;"/>
<!-- eye -->
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#ffffff"/>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke:black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke:black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
<!-- ears -->
<polyline points="108 62, 90 10, 70 45, 50 10, 32 62" style="stroke:black; fill:none;"/>
<!-- mouth -->
<polyline points="35 110, 45 120, 95 120, 105 110" style="stroke:black; fill:none;"/>
<!-- nose -->
<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke:black; fill:#ffcccc"/>
<text x="60" y="165" style="font-family:sans-serif; font-size:14pt; stroke:none; fill:black;">Cat</text>
</svg>"""
In [12]:
from xml.dom.minidom import parse, parseString, getDOMImplementation
from xml.dom import DOMException, Node
from urllib.request import urlopen
from IPython.display import SVG, display
class XMLasDOM():
def __init__(self,xmldocument=None,filename=None):
if xmldocument:
if xmldocument.startswith('http'):
f = urlopen(xmldocument)
xmldocument = f.read()
self.document = parseString(xmldocument)
elif filename:
self.document = parse(filename)
else:
raise ValueError("kein Argument übergeben")
self.root = self.document.documentElement
svgimage = XMLasDOM(xmldocument=svgCat)
In [13]:
root = svgimage.root
print(root)
<DOM Element: svg at 0x22607efadf0>
In [14]:
SVG(svgimage.root.toxml())
Out[14]:
In [15]:
alleCircles = root.getElementsByTagName("circle")
print(alleCircles)
[<DOM Element: circle at 0x22607f31048>, <DOM Element: circle at 0x22607f310e0>, <DOM Element: circle at 0x22607f31178>]
In [16]:
linkesAuge = alleCircles[2]
linkesAuge.setAttribute("fill","#339933")
In [17]:
SVG(svgimage.root.toxml())
Out[17]:
In [19]:
for i in range(10):
if i%2 == 0:
linkesAuge.setAttribute("fill","#ffffff")
else:
linkesAuge.setAttribute("fill","#339933")
display(SVG(svgimage.root.toxml()))
In [20]:
linkesAuge.setAttribute("fill","#ffffff")
SVG(svgimage.root.toxml())
Out[20]:
In [21]:
linkesAuge.setAttribute("fill","#339933")
SVG(svgimage.root.toxml())
Out[21]:
In [23]:
%%SVG
<svg width="300" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="20" width="180" height="120" style="stroke-width:2; fill:yellow; stroke:red;"/>
<text x="30" y="50">Hallo Ente</text>
<defs>
<g id="duck" style="fill:blue">
<path d="M 0.0 112 L 20 124 L 40 129 L 60 126
L 80 120 L 100 111 L 120 104 L 140 101
L 164 106 L 170 103 L 173 80 L 178 60
L 185 39 L 200 30 L 220 30 L 240 40
L 260 61 L 280 69 L 290 68 L 288 77
L 272 85 L 250 85 L 230 85 L 215 88
L 211 95 L 215 110 L 228 120 L 241 130
L 251 149 L 252 164 L 242 181 L 221 189
L 200 191 L 180 193 L 160 192 L 140 190
L 120 190 L 100 188 L 80 182 L 61 179
L 42 171 L 30 159 L 13 140 L 00 112 Z"/>
</g>
</defs>
<use xlink:href="#duck" style="opacity:0.3"/>
<use xlink:href="#duck" style="opacity:0.5" transform="scale(0.5) translate(50 70)"/>
</svg>
In [ ]:
%%SVG
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="20" width="180" height="120" style="stroke-width:2; fill:yellow; stroke:red;"/>
<text x="30" y="50">Hallo Ente</text>
<defs>
<g id="duck" style="fill:blue">
<path d="M 0.0 112 L 20 124 L 40 129 L 60 126
L 80 120 L 100 111 L 120 104 L 140 101
L 164 106 L 170 103 L 173 80 L 178 60
L 185 39 L 200 30 L 220 30 L 240 40
L 260 61 L 280 69 L 290 68 L 288 77
L 272 85 L 250 85 L 230 85 L 215 88
L 211 95 L 215 110 L 228 120 L 241 130
L 251 149 L 252 164 L 242 181 L 221 189
L 200 191 L 180 193 L 160 192 L 140 190
L 120 190 L 100 188 L 80 182 L 61 179
L 42 171 L 30 159 L 13 140 L 00 112 Z"/>
</g>
</defs>
<use xlink:href="#duck" style="opacity:0.3"/>
<use xlink:href="#duck" style="opacity:0.5" transform="scale(0.5) translate(50 70)"/>
</svg>
In [24]:
from xml.dom.minidom import getDOMImplementation
impl = getDOMImplementation()
document = impl.createDocument("http://www.w3.org/2000/svg","svg",None)
root = document.documentElement
print(root)
<DOM Element: svg at 0x22607f6f340>
In [25]:
root.toxml()
Out[25]:
'<svg/>'
In [26]:
impl = getDOMImplementation()
document = impl.createDocument("http://www.w3.org/2000/svg","svg",None)
root = document.documentElement
root.setAttribute("xmlns","http://www.w3.org/2000/svg")
root.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink")
In [27]:
root.toxml()
Out[27]:
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>'
In [28]:
class svgdocument():
def __init__(self, width="300", height="200"):
impl = getDOMImplementation()
self.document = impl.createDocument("http://www.w3.org/2000/svg","svg",None)
self.root = self.document.documentElement
self.root.setAttribute("xmlns","http://www.w3.org/2000/svg")
self.root.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink")
self.root.setAttribute("width",width)
self.root.setAttribute("height",height)
In [30]:
svgdocument1 = svgdocument()
svgdocument1.root.toxml()
Out[30]:
'<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>'
In [34]:
class svgdocument():
def __init__(self, width="300", height="200"):
impl = getDOMImplementation()
self.document = impl.createDocument("http://www.w3.org/2000/svg","svg",None)
self.root = self.document.documentElement
self.root.setAttribute("xmlns","http://www.w3.org/2000/svg")
self.root.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink")
self.root.setAttribute("width",width)
self.root.setAttribute("height",height)
def elem(self,name,parent,**kwargs):
tmp = self.document.createElement(name)
elem = parent.appendChild(tmp)
for k,v in kwargs.items():
if k == "href": elem.setAttribute("xlink:href",v)
else: elem.setAttribute(k,v)
return elem
def xyElem(self,name,x,y,parent,style="",id=None):
elem = self.elem(name,parent,style=style,id=id)
elem.setAttribute("x",x)
elem.setAttribute("y",y)
return elem
def rect(self,x,y,w,h,parent,style="stroke-width:2; fill:yellow; stroke:red",id=None):
elem = self.xyElem("rect",x,y,parent,style=style,id=id)
elem.setAttribute("width",w)
elem.setAttribute("height",h)
return elem
def text(self,x,y,text,parent):
elem = self.xyElem("text",x,y,parent)
tmp = self.document.createTextNode(text)
elem.appendChild(tmp)
return elem
def path(self,d,parent):
elem = self.elem("path",parent,d=d)
return elem
In [31]:
dict(x=30,y=40,style="fill:#333333; stroke:2",id="#duck")
Out[31]:
{'x': 30, 'y': 40, 'style': 'fill:#333333; stroke:2', 'id': '#duck'}
In [32]:
kwargs = dict(x=30,y=40,style="fill:#333333; stroke:2",id="#duck")
kwargs.items()
Out[32]:
dict_items([('x', 30), ('y', 40), ('style', 'fill:#333333; stroke:2'), ('id', '#duck')])
In [33]:
for k,v in kwargs.items():
print(k,v)
x 30 y 40 style fill:#333333; stroke:2 id #duck
In [35]:
instanz = svgdocument()
root = instanz.root
rect = instanz.rect("10","20","180","120",root)
root.toxml()
Out[35]:
'<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect height="120" id="" style="stroke-width:2; fill:yellow; stroke:red" width="180" x="10" y="20"/></svg>'
In [37]:
text = instanz.text("30","50","Hallo Ente",root)
defs = instanz.elem("defs",root)
g = instanz.elem("g",defs,style="fill:blue",id="duck")
path_d = """M 0.0 112 L 20 124 L 40 129 L 60 126
L 80 120 L 100 111 L 120 104 L 140 101
L 164 106 L 170 103 L 173 80 L 178 60
L 185 39 L 200 30 L 220 30 L 240 40
L 260 61 L 280 69 L 290 68 L 288 77
L 272 85 L 250 85 L 230 85 L 215 88
L 211 95 L 215 110 L 228 120 L 241 130
L 251 149 L 252 164 L 242 181 L 221 189
L 200 191 L 180 193 L 160 192 L 140 190
L 120 190 L 100 188 L 80 182 L 61 179
L 42 171 L 30 159 L 13 140 L 00 112 Z"""
path = instanz.path(path_d,g)
use1 = instanz.elem("use",root,href="#duck",style="opacity:0.3")
use2 = instanz.elem("use",root,href="#duck",style="opacity:0.5",transform="scale(0.5) translate(50 70)")
root.toxml()
Out[37]:
'<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect height="120" id="" style="stroke-width:2; fill:yellow; stroke:red" width="180" x="10" y="20"/><text id="" style="" x="30" y="50">Hallo Ente</text><defs><g id="duck" style="fill:blue"/></defs><text id="" style="" x="30" y="50">Hallo Ente</text><defs><g id="duck" style="fill:blue"><path d="M 0.0 112 L 20 124 L 40 129 L 60 126 \n L 80 120 L 100 111 L 120 104 L 140 101\n L 164 106 L 170 103 L 173 80 L 178 60\n L 185 39 L 200 30 L 220 30 L 240 40\n L 260 61 L 280 69 L 290 68 L 288 77\n L 272 85 L 250 85 L 230 85 L 215 88\n L 211 95 L 215 110 L 228 120 L 241 130\n L 251 149 L 252 164 L 242 181 L 221 189\n L 200 191 L 180 193 L 160 192 L 140 190\n L 120 190 L 100 188 L 80 182 L 61 179\n L 42 171 L 30 159 L 13 140 L 00 112 Z"/></g></defs><use style="opacity:0.3" xlink:href="#duck"/><use style="opacity:0.5" transform="scale(0.5) translate(50 70)" xlink:href="#duck"/></svg>'
In [38]:
SVG(root.toxml())
Out[38]:
In [39]:
%%SVG
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="grid" patternUnits="userSpaceOnUse" width="50" height="50">
<rect x="0" y="0" width="50" height="1" fill="#000" opacity="1.0"/>
<rect x="0" y="0" width="1" height="50" fill="#000" opacity="1.0"/>
</pattern>
</defs>
<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<rect fill="url(#grid)" stroke-width="2" stroke="#000" x="0" y="0" width="250" height="250"/>
<text x="0" y="0" text-anchor="middle" font-size="16" font-family="Granada,Times New Roman,serif">
<tspan x="125" y="-40" font-weight="bold" font-size="1.2em">x</tspan>
<tspan x="0" y="-10">0</tspan>
<tspan x="50" y="-10">50</tspan>
<tspan x="100" y="-10">100</tspan>
<tspan x="150" y="-10">150</tspan>
<tspan x="200" y="-10">200</tspan>
<tspan x="250" y="-10">250</tspan>
</text>
<text x="0" y="0" text-anchor="middle" font-size="16" font-family="Granada,Times New Roman,serif">
<tspan x="-50" y="125" font-weight="bold" font-size="1.2em">y</tspan>
<tspan x="-20" y="0" dy="6">0</tspan>
<tspan x="-20" y="50" dy="6">50</tspan>
<tspan x="-20" y="100" dy="6">100</tspan>
<tspan x="-20" y="150" dy="6">150</tspan>
<tspan x="-20" y="200" dy="6">200</tspan>
<tspan x="-20" y="250" dy="6">250</tspan>
</text>
<g opacity="0.8">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>
</svg>
In [40]:
%%SVG
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="grid" patternUnits="userSpaceOnUse" width="50" height="50">
<rect x="0" y="0" width="50" height="1" fill="#000" opacity="1.0"/>
<rect x="0" y="0" width="1" height="50" fill="#000" opacity="1.0"/>
</pattern>
</defs>
<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<rect fill="url(#grid)" stroke-width="2" stroke="#000" x="0" y="0" width="250" height="250"/>
<text x="0" y="0" text-anchor="middle" font-size="16" font-family="Granada,Times New Roman,serif">
<tspan x="125" y="-40" font-weight="bold" font-size="1.2em">x</tspan>
<tspan x="0" y="-10">0</tspan>
<tspan x="50" y="-10">50</tspan>
<tspan x="100" y="-10">100</tspan>
<tspan x="150" y="-10">150</tspan>
<tspan x="200" y="-10">200</tspan>
<tspan x="250" y="-10">250</tspan>
</text>
<text x="0" y="0" text-anchor="middle" font-size="16" font-family="Granada,Times New Roman,serif">
<tspan x="-50" y="125" font-weight="bold" font-size="1.2em">y</tspan>
<tspan x="-20" y="0" dy="6">0</tspan>
<tspan x="-20" y="50" dy="6">50</tspan>
<tspan x="-20" y="100" dy="6">100</tspan>
<tspan x="-20" y="150" dy="6">150</tspan>
<tspan x="-20" y="200" dy="6">200</tspan>
<tspan x="-20" y="250" dy="6">250</tspan>
</text>
<g opacity="0.8">
</g>
</svg>
In [54]:
class svgdocument():
def __init__(self, width="391", height="391", viewBoxX=-70, viewBoxY=-70):
impl = getDOMImplementation()
self.document = impl.createDocument("http://www.w3.org/2000/svg","svg",None)
self.root = self.document.documentElement
self.root.setAttribute("xmlns","http://www.w3.org/2000/svg")
self.root.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink")
self.root.setAttribute("width",width)
self.root.setAttribute("height",height)
self.width = width
self.height = height
if viewBoxX:
self.viewBoxX = viewBoxX
self.viewBoxY = viewBoxY
self.root.setAttribute("viewBox","{} {} {} {}".format(viewBoxX-0.5,viewBoxY-0.5,width,height))
def elem(self,name,parent,**kwargs):
tmp = self.document.createElement(name)
elem = parent.appendChild(tmp)
for k,v in kwargs.items():
if k == "href": elem.setAttribute("xlink:href",v)
else: elem.setAttribute(k,v)
return elem
def xyElem(self,name,x,y,parent,style="",id=None):
elem = self.elem(name,parent,style=style,id=id)
elem.setAttribute("x",x)
elem.setAttribute("y",y)
return elem
def rect(self,x,y,w,h,parent,style="stroke-width:2; fill:yellow; stroke:red",id=None):
elem = self.xyElem("rect",x,y,parent,style=style,id=id)
elem.setAttribute("width",w)
elem.setAttribute("height",h)
return elem
def text(self,x,y,text,parent):
elem = self.xyElem("text",x,y,parent)
tmp = self.document.createTextNode(text)
elem.appendChild(tmp)
return elem
def path(self,d,parent):
elem = self.elem("path",parent,d=d)
return elem
def template(self,width="50",height="50"):
defs = self.elem("defs",self.root)
pattern = self.elem("pattern",defs,id="grid",patternUnits="userSpaceOnUse",width=width,height=height)
self.rect(0,0,width,"1",pattern,style="fill:#000; opacity:1.0")
self.rect(0,0,"1",height,pattern,style="fill:#000; opacity:1.0")
self.rect(str(self.viewBoxX),str(self.viewBoxY),str(int(self.width)-1),str(int(self.height)-1),self.root,style="fill:#fff; stroke:#000")
self.rect(0,0,"250","250",self.root,style="fill:url(#grid); stroke-width:2; stroke:#000")
text = self.text(0,0,"",self.root)
text.setAttribute("text-anchor","middle")
text.setAttribute("font-size","16")
text.setAttribute("font-family","Granada,Times New Roman,serif")
x = self.xyElem("tspan","125","-40",text)
x.setAttribute("font-weight","bold")
x.setAttribute("font-size","1.2em")
x.appendChild(self.document.createTextNode("x"))
for x in [0,50,100,150,200,250]:
tspan = self.xyElem("tspan",str(x),"-10",text)
tspan.appendChild(self.document.createTextNode(str(x)))
text = self.text(0,0,"",self.root)
text.setAttribute("text-anchor","middle")
text.setAttribute("font-size","16")
text.setAttribute("font-family","Granada,Times New Roman,serif")
y = self.xyElem("tspan","-50","125",text)
y.setAttribute("font-weight","bold")
y.setAttribute("font-size","1.2em")
y.appendChild(self.document.createTextNode("y"))
for y in [0,50,100,150,200,250]:
tspan = self.xyElem("tspan","-20",str(y),text)
tspan.setAttribute("dy","6")
tspan.appendChild(self.document.createTextNode(str(y)))
In [55]:
instanz = svgdocument()
instanz.template()
SVG(instanz.root.toxml())
Out[55]:
