Fwd: Multiple cairo produced instances on a webpage.

---------- Forwarded message ----------
From: Chris Lyon <[email protected]>
Date: 12 August 2015 at 10:29
Subject: Multiple cairo produced instances on a webpage.
To: [email protected]


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>

-- 
cairo mailing list
[email protected]
http://lists.cairographics.org/mailman/listinfo/cairo