05. Jupyter Notebook

ehemalige Veranstaltungen ia3.netz + ia3.data sowie ia4.Netz im Studiengang Interaktive Medien

(c) 2020 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]:
Cat Stick Figure of a Cat Cat
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]:
Cat Stick Figure of a Cat Cat
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()))
Cat Stick Figure of a Cat Cat
Cat Stick Figure of a Cat Cat
Cat Stick Figure of a Cat Cat
Cat Stick Figure of a Cat Cat
Cat Stick Figure of a Cat Cat
Cat Stick Figure of a Cat Cat
Cat Stick Figure of a Cat Cat
Cat Stick Figure of a Cat Cat
Cat Stick Figure of a Cat Cat
Cat Stick Figure of a Cat Cat
In [20]:
linkesAuge.setAttribute("fill","#ffffff")
SVG(svgimage.root.toxml())
Out[20]:
Cat Stick Figure of a Cat Cat
In [21]:
linkesAuge.setAttribute("fill","#339933")
SVG(svgimage.root.toxml())
Out[21]:
Cat Stick Figure of a Cat Cat
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>
Hallo Ente
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]:
Hallo EnteHallo Ente
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>
x 0 50 100 150 200 250 y 0 50 100 150 200 250
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>
x 0 50 100 150 200 250 y 0 50 100 150 200 250
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]:
x050100150200250y050100150200250