<div dir="ltr"> <div class="gmail_quote">---------- Forwarded message ---------- From: Chris Lyon <<a href="mailto:wyleus@gmail.com">wyleus@gmail.com</a>> Date: 12 August 2015 at 10:29 Subject: Multiple cairo produced instances on a webpage. To: <a href="mailto:cairo@cairographics.org">cairo@cairographics.org</a> <div dir="ltr">I am writing a python/django app to display svg images of servers on a dashboard screen.<div> </div><div>I have several device instances that I render as svg and display in the django admin list.</div><div> </div><div><img src="cid:ii_id8kf6c10_14f2134d4d664430" width="544" height="289"> 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) </div><div> </div><div>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?</div><div> </div><div> </div><div>The code that generates each instance of the list is ...</div><div> </div><div><pre style="color:rgb(0,0,0);font-family:'DejaVu Sans Mono';font-size:9pt">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()</pre></div><div> </div><div>Where obj is an instance of the device model with the following draw method.</div><div> </div><div><pre style="color:rgb(0,0,0);font-family:'DejaVu Sans Mono';font-size:9pt">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) </pre></div><div> </div><div> </div><div>The html source code for the first instance is :</div><div> </div><div><table><tbody><tr><td><svg xmlns="<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</a>" xmlns:xlink="<a href="http://www.w3.org/1999/xlink" target="_blank">http://www.w3.org/1999/xlink</a>" width="100pt" height="100pt" viewBox="0 0 100 100" version="1.1"></td></tr><tr><td value="220"></td><td><defs></td></tr><tr><td value="221"></td><td><g></td></tr><tr><td value="222"></td><td><symbol overflow="visible" id="glyph0-0"></td></tr><tr><td value="223"></td><td><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 "/></td></tr><tr><td value="224"></td><td></symbol></td></tr><tr><td value="225"></td><td><symbol overflow="visible" id="glyph0-1"></td></tr><tr><td value="226"></td><td><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 "/></td></tr><tr><td value="227"></td><td></symbol></td></tr><tr><td value="228"></td><td><symbol overflow="visible" id="glyph0-2"></td></tr><tr><td value="229"></td><td><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 "/></td></tr><tr><td value="230"></td><td></symbol></td></tr><tr><td value="231"></td><td><symbol overflow="visible" id="glyph0-3"></td></tr><tr><td value="232"></td><td><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 "/></td></tr><tr><td value="233"></td><td></symbol></td></tr><tr><td value="234"></td><td><symbol overflow="visible" id="glyph0-4"></td></tr><tr><td value="235"></td><td><path style="stroke:none;" d=""/></td></tr><tr><td value="236"></td><td></symbol></td></tr><tr><td value="237"></td><td><symbol overflow="visible" id="glyph0-5"></td></tr><tr><td value="238"></td><td><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 "/></td></tr><tr><td value="239"></td><td></symbol></td></tr><tr><td value="240"></td><td><symbol overflow="visible" id="glyph0-6"></td></tr><tr><td value="241"></td><td><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 "/></td></tr><tr><td value="242"></td><td></symbol></td></tr><tr><td value="243"></td><td><symbol overflow="visible" id="glyph0-7"></td></tr><tr><td value="244"></td><td><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 "/></td></tr><tr><td value="245"></td><td></symbol></td></tr><tr><td value="246"></td><td><symbol overflow="visible" id="glyph0-8"></td></tr><tr><td value="247"></td><td><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 "/></td></tr><tr><td value="248"></td><td></symbol></td></tr><tr><td value="249"></td><td><symbol overflow="visible" id="glyph0-9"></td></tr><tr><td value="250"></td><td><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 "/></td></tr><tr><td value="251"></td><td></symbol></td></tr><tr><td value="252"></td><td><symbol overflow="visible" id="glyph0-10"></td></tr><tr><td value="253"></td><td><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 "/></td></tr><tr><td value="254"></td><td></symbol></td></tr><tr><td value="255"></td><td><symbol overflow="visible" id="glyph0-11"></td></tr><tr><td value="256"></td><td><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 "/></td></tr><tr><td value="257"></td><td></symbol></td></tr><tr><td value="258"></td><td><symbol overflow="visible" id="glyph0-12"></td></tr><tr><td value="259"></td><td><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 "/></td></tr><tr><td value="260"></td><td></symbol></td></tr><tr><td value="261"></td><td></g></td></tr><tr><td value="262"></td><td></defs></td></tr><tr><td value="263"></td><td><g id="surface21"></td></tr><tr><td value="264"></td><td><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 "/></td></tr><tr><td value="265"></td><td><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 "/></td></tr><tr><td value="266"></td><td><g style="fill:rgb(100%,100%,100%);fill-opacity:1;"></td></tr><tr><td value="267"></td><td> <use xlink:href="#glyph0-1" x="11" y="11"/></td></tr><tr><td value="268"></td><td> <use xlink:href="#glyph0-2" x="19.310547" y="11"/></td></tr><tr><td value="269"></td><td> <use xlink:href="#glyph0-3" x="25.980469" y="11"/></td></tr><tr><td value="270"></td><td> <use xlink:href="#glyph0-4" x="32.972656" y="11"/></td></tr><tr><td value="271"></td><td> <use xlink:href="#glyph0-5" x="36.454102" y="11"/></td></tr><tr><td value="272"></td><td> <use xlink:href="#glyph0-6" x="45.125977" y="11"/></td></tr><tr><td value="273"></td><td> <use xlink:href="#glyph0-7" x="51.488281" y="11"/></td></tr><tr><td value="274"></td><td> <use xlink:href="#glyph0-6" x="57.298828" y="11"/></td></tr><tr><td value="275"></td><td> <use xlink:href="#glyph0-8" x="63.661133" y="11"/></td></tr><tr><td value="276"></td><td> <use xlink:href="#glyph0-2" x="67.459961" y="11"/></td></tr><tr><td value="277"></td><td> <use xlink:href="#glyph0-9" x="74.129883" y="11"/></td></tr><tr><td value="278"></td><td> <use xlink:href="#glyph0-10" x="81.12207" y="11"/></td></tr><tr><td value="279"></td><td> <use xlink:href="#glyph0-6" x="91.703125" y="11"/></td></tr><tr><td value="280"></td><td> <use xlink:href="#glyph0-11" x="98.06543" y="11"/></td></tr><tr><td value="281"></td><td> <use xlink:href="#glyph0-12" x="105.335938" y="11"/></td></tr><tr><td value="282"></td><td></g></td></tr><tr><td value="283"></td><td></g></td></tr><tr><td value="284"></td><td></svg></td></tr></tbody></table></div></div> </div> </div>