html! {
    <g ref={self.group_ref.clone()} transform={format!("translate({} {})", props.geometry.x-(sx/2), props.geometry.y-(sy/2))}>
    
        <rect ref={self.svg_ref.clone()}  
            width={sx.to_string()} height={sy.to_string()} 
            rx=5
            style="fill:white; stroke:grey; stroke-width:1"></rect>

        <image href="static/person-40.png" height="40" width="40" x="5" y="5"></image>


        <@{"foreignObject"} ref={self.text_ref.clone()} x="45" y="0" width="150" height="50">
            {"Works!"}
            <div xmlns="http://www.w3.org/1999/xhtml">{"Doesn't work!"}</div>
        </@>
    </g>
}

html! {
    <svg ref={self.svg_ref.clone()} width="100%" height="100%"
        onpointermove={_ctx.link().callback(|e| TreeCanvasMsg::MouseMove(e))} 
        onpointerdown={_ctx.link().callback(|_| TreeCanvasMsg::MouseDown)}
        onpointerup={_ctx.link().callback(|_| TreeCanvasMsg::MouseUp)}
        onpointerleave={_ctx.link().callback(|_| TreeCanvasMsg::MouseUp)}
        style="touch-action: none"
        xmlns="http://www.w3.org/2000/svg">

        ....
        
        <g ref={self.transform_ref.clone()} transform={format!("translate({} {})", self.vx, self.vy)}> 
            ...
            <NodeComponent geometry={NodeGeometry {
                x: 0,
                y: 0
            }}/>

            <NodeComponent geometry={NodeGeometry {
                x: 250,
                y: 0
            }}/>

        </g>
    </svg>
}