[cairo] Fwd: Multiple cairo produced instances on a webpage.

Chris Lyon wyleus at gmail.com
Fri Aug 14 04:13:27 PDT 2015


---------- Forwarded message ----------
From: Chris Lyon <wyleus at gmail.com>
Date: 12 August 2015 at 10:29
Subject: Multiple cairo produced instances on a webpage.
To: cairo at cairographics.org


I am writing a python/django app to display svg images of servers on a
dashboard screen.

I have several device instances that I render as svg and display in the
django admin list.


​As can be seen the svg generated text is correct on the first instance but
incorrect on the others (the different colours are, however, correct, this
is sub-classed from a device type definition)

I assume (possibly in error) that the xlinks are becoming confused with
each separate instance using the same names as the first instance. Is there
any obvious way of preventing this? or is there some other issue causing
the problem?


The code that generates each instance of the list  is ...

def render_svg(self, obj):
    width = 100
    height = 100

    import io
    fo = io.BytesIO()

    surface = SVGSurface(fo, width, height)
    context = Context(surface)
    obj.draw(context, width, height )
    surface.finish()

    str = fo.getvalue()
    fo.close()


Where obj is an instance of the device model with the following draw method.

def draw(self, cr, width, height):
    """
    Draw A Device
    """

    cr.set_source_rgb(0.4,
                      0.4,
                      0.4)

    cr.rectangle(self.pos_x + DROP_SHADOW_X,
                 self.pos_y + DROP_SHADOW_Y,
                 self.width,
                 self.height
                 )
    cr.fill()

    # Foreground

    cr.set_source_rgb(self.back_r,
                      self.back_g,
                      self.back_b)

    cr.rectangle(self.pos_x,
                 self.pos_y,
                 self.width,
                 self.height
                 )
    cr.fill()

    # draw text

    cr.set_source_rgb(1.0, 1.0, 1.0)
    cr.select_font_face(
        "Georgia",
        cairocffi.FONT_SLANT_NORMAL,
        cairocffi.FONT_WEIGHT_BOLD
    )
    x_bearing, y_bearing, width, height = cr.text_extents(self.name)[:4]
    cr.move_to(self.pos_x + 10 , self.pos_y + 10)
    cr.show_text(self.name)



The html source code for the first instance is :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="
http://www.w3.org/1999/xlink" width="100pt" height="100pt" viewBox="0 0 100
100" version="1.1"><defs><g><symbol overflow="visible" id="glyph0-0"><path
style="stroke:none;" d="M 0.5 1.765625 L 0.5 -7.046875 L 5.5 -7.046875 L
5.5 1.765625 Z M 1.0625 1.21875 L 4.9375 1.21875 L 4.9375 -6.484375 L
1.0625 -6.484375 Z M 1.0625 1.21875 "/></symbol><symbol overflow="visible"
id="glyph0-1"><path style="stroke:none;" d="M 5.3125 -3.5625 C 5.601562
-3.519531 5.847656 -3.421875 6.046875 -3.265625 C 6.242188 -3.117188
6.414062 -2.90625 6.5625 -2.625 L 7.625 -0.59375 L 8.375 -0.59375 L 8.375 0
L 5.96875 0 L 4.8125 -2.203125 C 4.582031 -2.660156 4.390625 -2.953125
4.234375 -3.078125 C 4.078125 -3.203125 3.859375 -3.265625 3.578125
-3.265625 L 3.28125 -3.265625 L 3.28125 -0.59375 L 4.21875 -0.59375 L
4.21875 0 L 0.46875 0 L 0.46875 -0.59375 L 1.40625 -0.59375 L 1.40625
-6.703125 L 0.46875 -6.703125 L 0.46875 -7.296875 L 4.625 -7.296875 C
5.476562 -7.296875 6.132812 -7.125 6.59375 -6.78125 C 7.050781 -6.4375
7.28125 -5.953125 7.28125 -5.328125 C 7.28125 -4.828125 7.113281 -4.425781
6.78125 -4.125 C 6.457031 -3.832031 5.96875 -3.644531 5.3125 -3.5625 Z M
3.28125 -3.84375 L 3.921875 -3.84375 C 4.378906 -3.84375 4.726562 -3.96875
4.96875 -4.21875 C 5.21875 -4.46875 5.34375 -4.820312 5.34375 -5.28125 C
5.34375 -5.738281 5.21875 -6.085938 4.96875 -6.328125 C 4.726562 -6.578125
4.378906 -6.703125 3.921875 -6.703125 L 3.28125 -6.703125 Z M 3.28125
-3.84375 "/></symbol><symbol overflow="visible" id="glyph0-2"><path style="
stroke:none;" d="M 3.34375 -0.40625 C 3.707031 -0.40625 3.960938 -0.5625
4.109375 -0.875 C 4.253906 -1.1875 4.328125 -1.757812 4.328125 -2.59375 C
4.328125 -3.425781 4.253906 -4 4.109375 -4.3125 C 3.960938 -4.625 3.707031
-4.78125 3.34375 -4.78125 C 2.96875 -4.78125 2.707031 -4.625 2.5625 -4.3125
C 2.414062 -4 2.34375 -3.425781 2.34375 -2.59375 C 2.34375 -1.769531
2.414062 -1.195312 2.5625 -0.875 C 2.707031 -0.5625 2.96875 -0.40625
3.34375 -0.40625 Z M 3.34375 0.140625 C 2.425781 0.140625 1.707031
-0.0976562 1.1875 -0.578125 C 0.664062 -1.066406 0.40625 -1.738281 0.40625
-2.59375 C 0.40625 -3.445312 0.664062 -4.113281 1.1875 -4.59375 C 1.707031
-5.082031 2.425781 -5.328125 3.34375 -5.328125 C 4.257812 -5.328125
4.972656 -5.082031 5.484375 -4.59375 C 6.003906 -4.113281 6.265625
-3.445312 6.265625 -2.59375 C 6.265625 -1.738281 6.003906 -1.066406
5.484375 -0.578125 C 4.972656 -0.0976562 4.257812 0.140625 3.34375 0.140625
Z M 3.34375 0.140625 "/></symbol><symbol overflow="visible" id="glyph0-3"><path
style="stroke:none;" d="M 0.96875 -0.59375 L 0.96875 -7.015625 L 0.234375
-7.015625 L 0.234375 -7.59375 L 2.703125 -7.59375 L 2.703125 -4.53125 C
2.847656 -4.800781 3.039062 -5 3.28125 -5.125 C 3.53125 -5.257812 3.835938
-5.328125 4.203125 -5.328125 C 4.941406 -5.328125 5.523438 -5.082031
5.953125 -4.59375 C 6.378906 -4.113281 6.59375 -3.445312 6.59375 -2.59375 C
6.59375 -1.75 6.378906 -1.082031 5.953125 -0.59375 C 5.523438 -0.101562
4.941406 0.140625 4.203125 0.140625 C 3.835938 0.140625 3.53125 0.078125
3.28125 -0.046875 C 3.039062 -0.179688 2.847656 -0.382812 2.703125 -0.65625
L 2.703125 0 L 0.234375 0 L 0.234375 -0.59375 Z M 2.703125 -2.34375 C
2.703125 -1.738281 2.78125 -1.300781 2.9375 -1.03125 C 3.09375 -0.757812
3.34375 -0.625 3.6875 -0.625 C 4.039062 -0.625 4.289062 -0.765625 4.4375
-1.046875 C 4.582031 -1.335938 4.65625 -1.851562 4.65625 -2.59375 C 4.65625
-3.34375 4.582031 -3.859375 4.4375 -4.140625 C 4.289062 -4.429688 4.039062
-4.578125 3.6875 -4.578125 C 3.34375 -4.578125 3.09375 -4.441406 2.9375
-4.171875 C 2.78125 -3.898438 2.703125 -3.460938 2.703125 -2.859375 Z M
2.703125 -2.34375 "/></symbol><symbol overflow="visible" id="glyph0-4"><path
style="stroke:none;" d=""/></symbol><symbol overflow="visible" id="glyph0-5
"><path style="stroke:none;" d="M 3.28125 -0.59375 L 3.953125 -0.59375 C
4.722656 -0.59375 5.28125 -0.835938 5.625 -1.328125 C 5.976562 -1.816406
6.15625 -2.59375 6.15625 -3.65625 C 6.15625 -4.707031 5.976562 -5.476562
5.625 -5.96875 C 5.28125 -6.457031 4.722656 -6.703125 3.953125 -6.703125 L
3.28125 -6.703125 Z M 0.46875 0 L 0.46875 -0.59375 L 1.40625 -0.59375 L
1.40625 -6.703125 L 0.46875 -6.703125 L 0.46875 -7.296875 L 4.203125
-7.296875 C 5.515625 -7.296875 6.515625 -6.984375 7.203125 -6.359375 C
7.898438 -5.734375 8.25 -4.832031 8.25 -3.65625 C 8.25 -2.46875 7.898438
-1.5625 7.203125 -0.9375 C 6.515625 -0.3125 5.515625 0 4.203125 0 Z M
0.46875 0 "/></symbol><symbol overflow="visible" id="glyph0-6"><path style="
stroke:none;" d="M 4.015625 -2.9375 C 4.015625 -3.613281 3.945312 -4.085938
3.8125 -4.359375 C 3.6875 -4.640625 3.472656 -4.78125 3.171875 -4.78125 C
2.867188 -4.78125 2.65625 -4.644531 2.53125 -4.375 C 2.40625 -4.101562
2.34375 -3.648438 2.34375 -3.015625 L 2.34375 -2.9375 Z M 5.90625 -2.34375
L 2.34375 -2.34375 L 2.34375 -2.3125 C 2.34375 -1.632812 2.441406 -1.144531
2.640625 -0.84375 C 2.835938 -0.550781 3.164062 -0.40625 3.625 -0.40625 C 4
-0.40625 4.300781 -0.503906 4.53125 -0.703125 C 4.757812 -0.898438 4.90625
-1.191406 4.96875 -1.578125 L 5.78125 -1.578125 C 5.644531 -0.984375
5.367188 -0.546875 4.953125 -0.265625 C 4.535156 0.00390625 3.953125
0.140625 3.203125 0.140625 C 2.296875 0.140625 1.601562 -0.09375 1.125
-0.5625 C 0.644531 -1.039062 0.40625 -1.71875 0.40625 -2.59375 C 0.40625
-3.457031 0.648438 -4.128906 1.140625 -4.609375 C 1.640625 -5.085938
2.328125 -5.328125 3.203125 -5.328125 C 4.054688 -5.328125 4.710938
-5.070312 5.171875 -4.5625 C 5.628906 -4.0625 5.875 -3.320312 5.90625
-2.34375 Z M 5.90625 -2.34375 "/></symbol><symbol overflow="visible" id="
glyph0-7"><path style="stroke:none;" d="M 2.234375 0 L 0.390625 -4.59375 L
-0.1875 -4.59375 L -0.1875 -5.1875 L 2.796875 -5.1875 L 2.796875 -4.59375 L
2.171875 -4.59375 L 3.484375 -1.3125 L 4.796875 -4.59375 L 4.109375
-4.59375 L 4.109375 -5.1875 L 6.0625 -5.1875 L 6.0625 -4.59375 L 5.453125
-4.59375 L 3.625 0 Z M 2.234375 0 "/></symbol><symbol overflow="visible" id
="glyph0-8"><path style="stroke:none;" d="M 2.8125 -0.59375 L 3.546875
-0.59375 L 3.546875 0 L 0.34375 0 L 0.34375 -0.59375 L 1.078125 -0.59375 L
1.078125 -7.015625 L 0.34375 -7.015625 L 0.34375 -7.59375 L 2.8125 -7.59375
Z M 2.8125 -0.59375 "/></symbol><symbol overflow="visible" id="glyph0-9"><path
style="stroke:none;" d="M 2.703125 -2.859375 L 2.703125 -2.34375 C 2.703125
-1.738281 2.78125 -1.300781 2.9375 -1.03125 C 3.09375 -0.757812 3.34375
-0.625 3.6875 -0.625 C 4.039062 -0.625 4.289062 -0.765625 4.4375 -1.046875
C 4.582031 -1.335938 4.65625 -1.851562 4.65625 -2.59375 C 4.65625 -3.34375
4.582031 -3.859375 4.4375 -4.140625 C 4.289062 -4.429688 4.039062 -4.578125
3.6875 -4.578125 C 3.34375 -4.578125 3.09375 -4.441406 2.9375 -4.171875 C
2.78125 -3.898438 2.703125 -3.460938 2.703125 -2.859375 Z M 0.96875
-4.59375 L 0.234375 -4.59375 L 0.234375 -5.1875 L 2.703125 -5.1875 L
2.703125 -4.53125 C 2.847656 -4.800781 3.039062 -5 3.28125 -5.125 C 3.53125
-5.257812 3.835938 -5.328125 4.203125 -5.328125 C 4.941406 -5.328125
5.523438 -5.082031 5.953125 -4.59375 C 6.378906 -4.113281 6.59375 -3.445312
6.59375 -2.59375 C 6.59375 -1.75 6.378906 -1.082031 5.953125 -0.59375 C
5.523438 -0.101562 4.941406 0.140625 4.203125 0.140625 C 3.835938 0.140625
3.53125 0.078125 3.28125 -0.046875 C 3.039062 -0.179688 2.847656 -0.382812
2.703125 -0.65625 L 2.703125 1.484375 L 3.5 1.484375 L 3.5 2.078125 L
0.234375 2.078125 L 0.234375 1.484375 L 0.96875 1.484375 Z M 0.96875
-4.59375 "/></symbol><symbol overflow="visible" id="glyph0-10"><path style="
stroke:none;" d="M 6.0625 -4.34375 C 6.3125 -4.6875 6.570312 -4.9375
6.84375 -5.09375 C 7.125 -5.25 7.453125 -5.328125 7.828125 -5.328125 C
8.421875 -5.328125 8.863281 -5.160156 9.15625 -4.828125 C 9.457031
-4.492188 9.609375 -3.984375 9.609375 -3.296875 L 9.609375 -0.59375 L
10.359375 -0.59375 L 10.359375 0 L 7.265625 0 L 7.265625 -0.59375 L 7.875
-0.59375 L 7.875 -3.046875 C 7.875 -3.691406 7.820312 -4.097656 7.71875
-4.265625 C 7.625 -4.429688 7.441406 -4.515625 7.171875 -4.515625 C
6.867188 -4.515625 6.632812 -4.394531 6.46875 -4.15625 C 6.300781 -3.925781
6.21875 -3.59375 6.21875 -3.15625 L 6.21875 -0.59375 L 6.828125 -0.59375 L
6.828125 0 L 3.859375 0 L 3.859375 -0.59375 L 4.484375 -0.59375 L 4.484375
-3.046875 C 4.484375 -3.691406 4.429688 -4.097656 4.328125 -4.265625 C
4.234375 -4.429688 4.050781 -4.515625 3.78125 -4.515625 C 3.46875 -4.515625
3.226562 -4.394531 3.0625 -4.15625 C 2.894531 -3.925781 2.8125 -3.59375
2.8125 -3.15625 L 2.8125 -0.59375 L 3.421875 -0.59375 L 3.421875 0 L
0.34375 0 L 0.34375 -0.59375 L 1.078125 -0.59375 L 1.078125 -4.59375 L
0.34375 -4.59375 L 0.34375 -5.1875 L 2.8125 -5.1875 L 2.8125 -4.453125 C
3.007812 -4.753906 3.238281 -4.972656 3.5 -5.109375 C 3.757812 -5.253906
4.066406 -5.328125 4.421875 -5.328125 C 4.847656 -5.328125 5.191406
-5.242188 5.453125 -5.078125 C 5.722656 -4.921875 5.925781 -4.675781 6.0625
-4.34375 Z M 6.0625 -4.34375 "/></symbol><symbol overflow="visible" id="
glyph0-11"><path style="stroke:none;" d="M 0.34375 0 L 0.34375 -0.59375 L
1.078125 -0.59375 L 1.078125 -4.59375 L 0.34375 -4.59375 L 0.34375 -5.1875
L 2.8125 -5.1875 L 2.8125 -4.453125 C 3.019531 -4.765625 3.253906 -4.988281
3.515625 -5.125 C 3.785156 -5.257812 4.125 -5.328125 4.53125 -5.328125 C
5.113281 -5.328125 5.550781 -5.15625 5.84375 -4.8125 C 6.144531 -4.46875
6.296875 -3.960938 6.296875 -3.296875 L 6.296875 -0.59375 L 7.046875
-0.59375 L 7.046875 0 L 3.9375 0 L 3.9375 -0.59375 L 4.578125 -0.59375 L
4.578125 -3.34375 C 4.578125 -3.789062 4.519531 -4.097656 4.40625 -4.265625
C 4.289062 -4.429688 4.09375 -4.515625 3.8125 -4.515625 C 3.46875 -4.515625
3.210938 -4.382812 3.046875 -4.125 C 2.890625 -3.875 2.8125 -3.472656
2.8125 -2.921875 L 2.8125 -0.59375 L 3.4375 -0.59375 L 3.4375 0 Z M 0.34375
0 "/></symbol><symbol overflow="visible" id="glyph0-12"><path style="
stroke:none;" d="M 0.984375 -4.59375 L 0.234375 -4.59375 L 0.234375 -5.1875
L 0.984375 -5.1875 L 0.984375 -6.796875 L 2.71875 -6.796875 L 2.71875
-5.1875 L 4.15625 -5.1875 L 4.15625 -4.59375 L 2.71875 -4.59375 L 2.71875
-1.421875 C 2.71875 -0.972656 2.753906 -0.691406 2.828125 -0.578125 C
2.898438 -0.460938 3.03125 -0.40625 3.21875 -0.40625 C 3.425781 -0.40625
3.578125 -0.472656 3.671875 -0.609375 C 3.773438 -0.753906 3.832031
-0.972656 3.84375 -1.265625 L 4.578125 -1.265625 C 4.546875 -0.742188
4.398438 -0.378906 4.140625 -0.171875 C 3.890625 0.0351562 3.453125
0.140625 2.828125 0.140625 C 2.109375 0.140625 1.617188 0.03125 1.359375
-0.1875 C 1.109375 -0.414062 0.984375 -0.828125 0.984375 -1.421875 Z M
0.984375 -4.59375 "/></symbol></g></defs><g id="surface21"><path style="
stroke:none;fill-rule:nonzero;fill:rgb(40%,40%,40%);fill-opacity:1;" d="M
11 11 L 211 11 L 211 111 L 11 111 Z M 11 11 "/><path style="
stroke:none;fill-rule:nonzero;fill:rgb(0%,60%,0%);fill-opacity:1;" d="M 1 1
L 201 1 L 201 101 L 1 101 Z M 1 1 "/><g style="
fill:rgb(100%,100%,100%);fill-opacity:1;"> <use xlink:href="#glyph0-1" x="11"
y="11"/> <use xlink:href="#glyph0-2" x="19.310547" y="11"/> <use xlink:href
="#glyph0-3" x="25.980469" y="11"/> <use xlink:href="#glyph0-4" x="32.972656"
y="11"/> <use xlink:href="#glyph0-5" x="36.454102" y="11"/> <use xlink:href
="#glyph0-6" x="45.125977" y="11"/> <use xlink:href="#glyph0-7" x="51.488281"
y="11"/> <use xlink:href="#glyph0-6" x="57.298828" y="11"/> <use xlink:href
="#glyph0-8" x="63.661133" y="11"/> <use xlink:href="#glyph0-2" x="67.459961"
y="11"/> <use xlink:href="#glyph0-9" x="74.129883" y="11"/> <use xlink:href
="#glyph0-10" x="81.12207" y="11"/> <use xlink:href="#glyph0-6" x="91.703125"
y="11"/> <use xlink:href="#glyph0-11" x="98.06543" y="11"/> <use xlink:href
="#glyph0-12" x="105.335938" y="11"/></g></g></svg>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.cairographics.org/archives/cairo/attachments/20150814/ead45e46/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screenshot - 120815 - 10:15:31.png
Type: image/png
Size: 55443 bytes
Desc: not available
URL: <http://lists.cairographics.org/archives/cairo/attachments/20150814/ead45e46/attachment-0001.png>


More information about the cairo mailing list