HOW TO PATCH SVG ================ MANUAL ------ 1. Clipping Regions for Sidebars -------------------------------- <defs> <clipPath id="myClip1"><rect id="Clip-Path-Left" x="0" y="0" width="216" height="400"/></clipPath> <clipPath id="myClip2"><rect id="Clip-Path-Right" x="0" y="0" width="216" height="400"/></clipPath> <clipPath id="myClip3"><rect id="Clip-Path-Left-Chat" x="0" y="0" width="216" height="400"/></clipPath> </defs> 2. foreignObject TextEditors for Chat ------------------------------------- <foreignObject id="GameChatEditor" x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);"> <div xmlns:data="Chat" id="edit" contentEditable="true" style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div> </foreignObject> <foreignObject id="OnlineChatEditor" x="10" y="504" width="198" height="120" onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);"> <div xmlns:data="Chat+xxx" contentEditable="true" id="onlineChatEdit" style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div> </foreignObject> JavaScript ---------- 3. Chat Containers (insert after Settings element for Z-order) -------------------------------------------------------------- <g id="Chat" y="0" clip-path="url(#myClip2)" transform="translate(857.000000, 107.000000)"/> <g id="Online-List" y="0" clip-path="url(#myClip1)" transform="translate(1.000000, 107.000000)"/> <g id="Online-Chat" y="0" clip-path="url(#myClip3)" transform="translate(1.000000, 107.000000)"/>