Вот кусочек svg:
<g id="hiddenPages" transform="rotate(0)">
<foreignObject transform="translate(-350,-350)" x="0" y="0" width="700" height="700" id="usedPage1">
<body xmlns="http://www.w3.org/1999/xhtml">
<div style="background-color:#004400; weight:700px; height:700px;">
<button>AAAAAAA</button><br/>
<textarea id="myTA" cols="40" rows="10">12346465443134</textarea>
</div>
</body>
</foreignObject>
........... кусок не относящийся к проблеме опущен ...........
<path transform="scale(6)" d="M 0 0 C 190 -70 340 150 440 -50" id="B" stroke="white" fill="none" stroke-width="8"/>
</g>
</g>
<use id="Pages" x="50%" y="50%" xlink:href="#hiddenPages"/>
Проблема в том. что при каждом изменении атрибута transform <textarea> сбрасывается в начальное состояние вне зависимости от того, что там написано.
Как сделать чтобы вышеописанной проблемы не было?