<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 14 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
        {font-family:"Lucida Console";
        panose-1:2 11 6 9 4 5 4 2 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0in;
        margin-bottom:.0001pt;
        font-size:11.0pt;
        font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:blue;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {mso-style-priority:99;
        color:purple;
        text-decoration:underline;}
span.EmailStyle17
        {mso-style-type:personal-compose;
        font-family:"Calibri","sans-serif";
        color:windowtext;}
.MsoChpDefault
        {mso-style-type:export-only;
        font-family:"Calibri","sans-serif";}
@page WordSection1
        {size:8.5in 11.0in;
        margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
        {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal">Hi all,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">I need to compute the size and coordinates for a bounding box for a <g> subtree in an SVG image (well, actually I just need the box center), identified by a specific attribute. It’s easy to do in a web browser (a little DOM traversal, then
 a <span style="font-size:8.0pt;font-family:"Lucida Console"">getBoundingClientRect()</span> call), but I need to do it server-side. It looks to me like Cairo library might be able to do that, but it also looks fairly complicated, and I just need to perform
 that one specific task.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">I am using the Ruby bindings for Cairo, together with SVG. Any suggestions on how to locate a given node by attribute (without the convenience of jQuery), and then to compute its bounding rectangle?<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">I am currently loading SVG into a Cairo surface as follows:<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:8.0pt;font-family:"Lucida Console"">@rsvgHandle = RSVG::Handle.new_from_file(@baseFile)<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:8.0pt;font-family:"Lucida Console"">dim = @rsvgHandle.dimensions<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:8.0pt;font-family:"Lucida Console"">@width = dim.width<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:8.0pt;font-family:"Lucida Console"">@height = dim.height<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:8.0pt;font-family:"Lucida Console""><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:8.0pt;font-family:"Lucida Console"">surface = Cairo::ImageSurface.new(Cairo::FORMAT_ARGB32, @width, @height)<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:8.0pt;font-family:"Lucida Console"">cr = Cairo::Context.new(surface)<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:8.0pt;font-family:"Lucida Console"">cr.render_rsvg_handle(@rsvgHandle)<o:p></o:p></span></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Thanks in advance!<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</body>
</html>