Programmatically generate SVG (vector) images, animations, and interactive Jupyter widgets

Add title tag (#24)

This adds a "title" tag, which can be used as described in the answer here: https://stackoverflow.com/questions/10643426/how-to-add-a-tooltip-to-an-svg-graphic

Changed files
+25 -5
drawSvg
examples
+3 -1
README.md
···
stroke='black'))
# Draw a rectangle
-
d.append(draw.Rectangle(0,0,40,50, fill='#1248ff'))
+
r = draw.Rectangle(0,0,40,50, fill='#1248ff')
+
r.appendTitle("Our first rectangle") # Add a tooltip
+
d.append(r)
# Draw a circle
d.append(draw.Circle(-40, -10, 30,
+19 -3
drawSvg/elements.py
···
self.children.append(animateElement)
def extendAnim(self, animateIterable):
self.children.extend(animateIterable)
+
def appendTitle(self, text, **kwargs):
+
self.children.append(Title(text, **kwargs))
class DrawingParentElement(DrawingBasicElement):
''' Base class for SVG elements that can have child nodes '''
···
def appendLine(self, line, **kwargs):
self.append(TSpan(line, **kwargs))
-
class TSpan(DrawingBasicElement):
-
''' A line of text within the Text element. '''
-
TAG_NAME = 'tspan'
+
class _TextContainingElement(DrawingBasicElement):
+
''' A private parent class used for elements that only have plain text
+
content. '''
hasContent = True
def __init__(self, text, **kwargs):
super().__init__(**kwargs)
···
if dryRun:
return
outputFile.write(self.escapedText)
+
+
+
class TSpan(_TextContainingElement):
+
''' A line of text within the Text element. '''
+
TAG_NAME = 'tspan'
+
+
class Title(_TextContainingElement):
+
''' A title element.
+
+
This element can be appended with shape.appendTitle("Your title!"),
+
which can be useful for adding a tooltip or on-hover text display
+
to an element.
+
'''
+
TAG_NAME = 'title'
class Rectangle(DrawingBasicElement):
''' A rectangle
+3 -1
examples/example1.svg
···
</marker>
</defs>
<path d="M-80,45 L70,49 L95,-49 L-90,-40" fill="#eeee00" stroke="black" />
-
<rect x="0" y="-50" width="40" height="50" fill="#1248ff" />
+
<rect x="0" y="-50" width="40" height="50" fill="#1248ff">
+
<title>Our first rectangle</title>
+
</rect>
<circle cx="-40" cy="10" r="30" fill="red" stroke-width="2" stroke="black" />
<path d="M-30,-5 l60,-30 h-70 Z" stroke-width="2" stroke="green" fill="black" fill-opacity="0.5" />
<circle cx="60" cy="20" r="20" stroke-dasharray="73.30382858376184 52.35987755982988" stroke-dashoffset="-31.41592653589793" stroke="red" stroke-width="5" fill="red" fill-opacity="0.2" />