We Keep Coding

Trying to access SVG elements generated with <use> with JavaScript

I'm trying to use JavaScript (velocity.js) to animate an SVG that I've defined using <defs> and then instantiated with <use> and I'm having trouble accessing the DOM element of the SVG component I'm trying to modify. My code works with normal inline SVG just fine, but when I switch to the <defs>/<use> method it breaks.
When I use the inline SVG I can console.log the element in question and it returns information, but trying to access that same element generated with <use> returns an empty object. Is there anything in particular I need to be doing when trying to access the DOM elements of SVG generated with <use>?
The HTML
<div class="screen">
<svg>
<use href="/media/defs.svg#poppyIdle"></use>
</svg>
</div>
and top of defs.svg (generated by inkscape, all I did was add <defs> and <symbol>) (don't want to post the whole thing)
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
<defs>
<symbol id="poppyIdle" viewBox="0 0 140 250">
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer12"
inkscape:label="eyelids"
style="display:inline"
transform="translate(-6.125676,0.02323548)">
<rect
style="fill:#4d4d4d;fill-opacity:1;stroke-width:0.0694716"
id="rect942-3"
width="28.423023"
height="2.0695279"
x="34.666679"
y="34.632057" />
<rect
style="display:inline;fill:#4d4d4d;fill-opacity:1;stroke-width:0.0694716"
id="rect942-3-6"
width="28.423023"
height="2.0695279"
x="85.931053"
y="34.629658" />
</g>
</symbol>
</defs>
</svg>

SVG use elements are like shadow DOM elements in HTML. Only the attributes of the USE element itself is exposed via the SVG DOM - you cannot alter any properties on a single USE element instance that are being cloned from the original symbol. It's not like a macro.

SVG SMIL Animation not animating

I need to create an SVG animation of 2 steps, for that I tried with JS. It worked but the animation wasn't playing "correctly" let's say it just go from step a to step b without anything between.
After a few research I disabled my js to try to animate my elt with SMIL using from and to attributes.
which gives us that code:
<svg class="ronce-svg" id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1165.1 826.09" style="transition: 0.5s ease;">
<path id="ronces" d="M1031,443.55s-27.35-7.84-66.35-14.74l-3.93-47.72L938.8,424.68c-38.46-5.44-83.57-8.69-124.23-3.51l-26.31-47.09-7.33,53.76a145.32,145.32,0,0,0-36.48,15.48c-23.37,14.34-43.09,36.27-61.07,62.1l-47.11-12.05,32.25,34.76c-14.32,23.15-27.83,48.3-41.63,73.29L578,591.18l31.29,41.37c-17,29.13-35,56.76-56,79.31l-42.52-23.81L534,730.28q-5,4.2-10.22,8c-29.72,21.53-58.5,27.39-88.39,27.21L424.26,732.6l-18.1,31.15c-32.43-3.22-66.83-9.71-105.61-8.24l-16.65-27-10.49,29.35a269.93,269.93,0,0,0-69.1,19.35q-3.51,1.5-6.93,3.15l-25.64-21.1,5.61,32.64c-28.06,18.94-50.27,46.19-69.52,77.19L72.28,858.31l25.19,28.27c-14.65,25.84-27.74,53.56-40.77,80.79l-42.11-9.08,30.76,32.57c-18,36.79-36.82,71.39-60.18,97.69l-25.95-17.48,12,31.67c-13.43,12.16-28.36,21.65-45.38,27.55C-202.69,1174.87-84.39,1199-84.39,1199s6.61,2,18.35.77a90,90,0,0,0,15.77-3.15c3.31-1,6.84-2.17,10.55-3.66,27.87-11.2,66.64-38.81,110.09-104.5q2.85-4.29,5.72-8.82l53.6,12.33-36.28-41.3c21-37.17,37-68.42,50.9-94.67l30.62,8.69L156,934.11c10.42-19,19.92-34.91,30-48.16l32.3,11.45-20-26a122.9,122.9,0,0,1,40.53-28.58l22,23.92-3.41-30.73c21.53-6.46,48.21-10.24,82.92-12.3l6.58-.37L358,853.22l12.16-30.74c47.87-1.32,87.45.8,122.18-2.81L516,856.05l3.65-40.78c43.1-9.87,79.2-34.33,116.42-95l49.48,11.16-33.44-39.48q3.66-6.92,7.33-14.34c12.86-25.93,22.77-49.8,31.36-71.57l56-.42-42.28-34.89c10-25.45,19.36-47.26,31.75-65.38L787.9,525.5l-28.51-46.1c22-18.62,52.7-30.79,100.57-36.39l26.21,49.73L897,440.15C933.07,438.57,977,439.69,1031,443.55Z"
transform="translate(134.07 -374.08);transition:0.5s ease"
/>
<animate
begin="0"
xlink:href="#ronces"
attributeName="d"
attributeType="XML"
from="M1031,443.55s-27.35-7.84-66.35-14.74l-3.93-47.72L938.8,424.68c-38.46-5.44-83.57-8.69-124.23-3.51l-26.31-47.09-7.33,53.76a145.32,145.32,0,0,0-36.48,15.48c-23.37,14.34-43.09,36.27-61.07,62.1l-47.11-12.05,32.25,34.76c-14.32,23.15-27.83,48.3-41.63,73.29L578,591.18l31.29,41.37c-17,29.13-35,56.76-56,79.31l-42.52-23.81L534,730.28q-5,4.2-10.22,8c-29.72,21.53-58.5,27.39-88.39,27.21L424.26,732.6l-18.1,31.15c-32.43-3.22-66.83-9.71-105.61-8.24l-16.65-27-10.49,29.35a269.93,269.93,0,0,0-69.1,19.35q-3.51,1.5-6.93,3.15l-25.64-21.1,5.61,32.64c-28.06,18.94-50.27,46.19-69.52,77.19L72.28,858.31l25.19,28.27c-14.65,25.84-27.74,53.56-40.77,80.79l-42.11-9.08,30.76,32.57c-18,36.79-36.82,71.39-60.18,97.69l-25.95-17.48,12,31.67c-13.43,12.16-28.36,21.65-45.38,27.55C-202.69,1174.87-84.39,1199-84.39,1199s6.61,2,18.35.77a90,90,0,0,0,15.77-3.15c3.31-1,6.84-2.17,10.55-3.66,27.87-11.2,66.64-38.81,110.09-104.5q2.85-4.29,5.72-8.82l53.6,12.33-36.28-41.3c21-37.17,37-68.42,50.9-94.67l30.62,8.69L156,934.11c10.42-19,19.92-34.91,30-48.16l32.3,11.45-20-26a122.9,122.9,0,0,1,40.53-28.58l22,23.92-3.41-30.73c21.53-6.46,48.21-10.24,82.92-12.3l6.58-.37L358,853.22l12.16-30.74c47.87-1.32,87.45.8,122.18-2.81L516,856.05l3.65-40.78c43.1-9.87,79.2-34.33,116.42-95l49.48,11.16-33.44-39.48q3.66-6.92,7.33-14.34c12.86-25.93,22.77-49.8,31.36-71.57l56-.42-42.28-34.89c10-25.45,19.36-47.26,31.75-65.38L787.9,525.5l-28.51-46.1c22-18.62,52.7-30.79,100.57-36.39l26.21,49.73L897,440.15C933.07,438.57,977,439.69,1031,443.55Z"
to="M970.58,357.22s-2,28.38-8.85,67.39l43.5,20-48.47,5.71c-8,38-20.42,81.5-39.19,117.94l35.25,40.83-53-11.5a145,145,0,0,1-27,29c-21.47,17.06-48.81,28.09-79.24,36.16l-4.78,48.39-21.64-42.2c-26.65,5.54-54.9,9.63-83.11,14.06l-7.09,49.41-28.17-43.55c-33.17,6-65.31,13.47-93.68,25.51l7.82,48.1-31.74-36.25q-5.65,3.25-11,6.87c-30.39,20.57-45.74,45.61-55.8,73.75l27.09,21.69L456,834.88c-8.07,31.58-13.74,66.12-28.38,102.06l19.67,24.88-31.17-.19A269.7,269.7,0,0,1,374.27,1020c-1.74,1.86-3.51,3.68-5.32,5.44L380,1056.7l-28.75-16.44c-27.39,19.89-60.59,31.44-96.31,38.93l-2,37.09-18-33.34c-29.29,4.93-59.81,7.75-89.86,10.69l-5.87,42.67-20.08-40c-40.74,4.38-79.67,10.18-112.39,23.14l7.56,30.36-25.67-22.07c-16,8.46-30,19.24-41.41,33.22C-138.6,1266.4-120.81,1147-120.81,1147s.38-6.89,5.55-17.5a89.74,89.74,0,0,1,8.36-13.74,110.18,110.18,0,0,1,7-8.67c20.06-22.35,59.27-49.34,135.85-67.71q5-1.2,10.25-2.36L53,982.42l26.39,48.22c42.11-7,77-11.4,106.37-15.45l2.31-31.75,22.28,28.21c21.43-3.29,39.61-6.78,55.5-11.68l.28-34.27,17.55,27.72a123.08,123.08,0,0,0,40.71-28.32l-14.94-28.89,27.72,13.71c13.43-18,26.1-41.8,39.91-73.71q1.32-3,2.6-6.06l-24.26-20.58,33-.92c17.6-44.53,29.16-82.45,44.42-113.85l-26.07-34.71,39.57,10.52c24-37.12,59.34-62.69,129.12-76.89l6.43-50.32,25.67,44.92q7.75-1.05,16-2c28.77-3.21,54.58-4.36,78-5l19.56-52.51,18.33,51.66c27.34-.7,51-2,72.29-7.47l-1.33-55.38L844,600.2c25-14.29,47-39,68.59-82.05l-37.76-41.64,53.1,7.86C941.75,451,955.73,409.28,970.58,357.22Z"
value="M1031,443.55s-27.35-7.84-66.35-14.74l-3.93-47.72L938.8,424.68c-38.46-5.44-83.57-8.69-124.23-3.51l-26.31-47.09-7.33,53.76a145.32,145.32,0,0,0-36.48,15.48c-23.37,14.34-43.09,36.27-61.07,62.1l-47.11-12.05,32.25,34.76c-14.32,23.15-27.83,48.3-41.63,73.29L578,591.18l31.29,41.37c-17,29.13-35,56.76-56,79.31l-42.52-23.81L534,730.28q-5,4.2-10.22,8c-29.72,21.53-58.5,27.39-88.39,27.21L424.26,732.6l-18.1,31.15c-32.43-3.22-66.83-9.71-105.61-8.24l-16.65-27-10.49,29.35a269.93,269.93,0,0,0-69.1,19.35q-3.51,1.5-6.93,3.15l-25.64-21.1,5.61,32.64c-28.06,18.94-50.27,46.19-69.52,77.19L72.28,858.31l25.19,28.27c-14.65,25.84-27.74,53.56-40.77,80.79l-42.11-9.08,30.76,32.57c-18,36.79-36.82,71.39-60.18,97.69l-25.95-17.48,12,31.67c-13.43,12.16-28.36,21.65-45.38,27.55C-202.69,1174.87-84.39,1199-84.39,1199s6.61,2,18.35.77a90,90,0,0,0,15.77-3.15c3.31-1,6.84-2.17,10.55-3.66,27.87-11.2,66.64-38.81,110.09-104.5q2.85-4.29,5.72-8.82l53.6,12.33-36.28-41.3c21-37.17,37-68.42,50.9-94.67l30.62,8.69L156,934.11c10.42-19,19.92-34.91,30-48.16l32.3,11.45-20-26a122.9,122.9,0,0,1,40.53-28.58l22,23.92-3.41-30.73c21.53-6.46,48.21-10.24,82.92-12.3l6.58-.37L358,853.22l12.16-30.74c47.87-1.32,87.45.8,122.18-2.81L516,856.05l3.65-40.78c43.1-9.87,79.2-34.33,116.42-95l49.48,11.16-33.44-39.48q3.66-6.92,7.33-14.34c12.86-25.93,22.77-49.8,31.36-71.57l56-.42-42.28-34.89c10-25.45,19.36-47.26,31.75-65.38L787.9,525.5l-28.51-46.1c22-18.62,52.7-30.79,100.57-36.39l26.21,49.73L897,440.15C933.07,438.57,977,439.69,1031,443.55Z;M970.58,357.22s-2,28.38-8.85,67.39l43.5,20-48.47,5.71c-8,38-20.42,81.5-39.19,117.94l35.25,40.83-53-11.5a145,145,0,0,1-27,29c-21.47,17.06-48.81,28.09-79.24,36.16l-4.78,48.39-21.64-42.2c-26.65,5.54-54.9,9.63-83.11,14.06l-7.09,49.41-28.17-43.55c-33.17,6-65.31,13.47-93.68,25.51l7.82,48.1-31.74-36.25q-5.65,3.25-11,6.87c-30.39,20.57-45.74,45.61-55.8,73.75l27.09,21.69L456,834.88c-8.07,31.58-13.74,66.12-28.38,102.06l19.67,24.88-31.17-.19A269.7,269.7,0,0,1,374.27,1020c-1.74,1.86-3.51,3.68-5.32,5.44L380,1056.7l-28.75-16.44c-27.39,19.89-60.59,31.44-96.31,38.93l-2,37.09-18-33.34c-29.29,4.93-59.81,7.75-89.86,10.69l-5.87,42.67-20.08-40c-40.74,4.38-79.67,10.18-112.39,23.14l7.56,30.36-25.67-22.07c-16,8.46-30,19.24-41.41,33.22C-138.6,1266.4-120.81,1147-120.81,1147s.38-6.89,5.55-17.5a89.74,89.74,0,0,1,8.36-13.74,110.18,110.18,0,0,1,7-8.67c20.06-22.35,59.27-49.34,135.85-67.71q5-1.2,10.25-2.36L53,982.42l26.39,48.22c42.11-7,77-11.4,106.37-15.45l2.31-31.75,22.28,28.21c21.43-3.29,39.61-6.78,55.5-11.68l.28-34.27,17.55,27.72a123.08,123.08,0,0,0,40.71-28.32l-14.94-28.89,27.72,13.71c13.43-18,26.1-41.8,39.91-73.71q1.32-3,2.6-6.06l-24.26-20.58,33-.92c17.6-44.53,29.16-82.45,44.42-113.85l-26.07-34.71,39.57,10.52c24-37.12,59.34-62.69,129.12-76.89l6.43-50.32,25.67,44.92q7.75-1.05,16-2c28.77-3.21,54.58-4.36,78-5l19.56-52.51,18.33,51.66c27.34-.7,51-2,72.29-7.47l-1.33-55.38L844,600.2c25-14.29,47-39,68.59-82.05l-37.76-41.64,53.1,7.86C941.75,451,955.73,409.28,970.58,357.22Z"
dur="1s"
repeatCount="indefinite"
fill="freeze"
/>
</svg>
But sadly it does exactly the same as the js script I made.
(The thing I want to animate is something I drew on Illustrator and that I just miror with a SVG animation)

SVG make different sections of the path in different colors

I have been trying to implement the following requirements.
1. SVG path to have multiple colors on different sections (eg - red color the curves and rest of it, in black color)
2. Only allow mouse event- click on those colored areas (curves)
I have tried with plain javascript and snap.svg
Plain html & Javascript
[Codepen using HTML & Js][1]
SNAP.svg
[Codepen using SNAP.svg][2]
[1]: https://codepen.io/sanathko1234/pen/vvMQQZ
[2]: https://codepen.io/sanathko1234/pen/OrGoRa
How can this be achieved?

One solution would be to use the path twice: first the green one and next the one using stroke-dasharray. The dashes are only over the curves. If you don't like the position or the length of the dashes change them to what you need. The gaps are not sensitive to mouse events, only the dashes are.
In css I've added #gold:hover{cursor:pointer} so that you can see that only the dashes are sensitive to the mouse.
I hope it helps.
svg{border:1px solid}
use{fill:none;stroke-width:18;}
#gold:hover{cursor:pointer}
<svg viewBox="-10 50 580 360" width="580" height="360" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="svg_1" d="m555,272c1,0.76736 4,85.76736 -71,97.76736c-75,12 -387,-39 -388,-39.76736c0,-0.23264 -29,-1.23264 -45,-21.23264l-42,-124.76736c-3,-11.23264 -3,-21.23264 3,-26.23264c6,-5 46,-67 69,-69.76736l474,184z" />
</defs>
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="360" width="580" x="-10" y="50"/>
</g>
<g>
<title>Layer 1</title>
<use xlink:href="#svg_1" stroke="green" />
<use xlink:href="#svg_1" stroke="gold" stroke-dasharray ="130 370 110 60 90 40 90 400 52.45" id="gold" pointer-events="stroke" />
</g>
</svg>
Observation: the sum of the dashes and the gaps is 1342.45 which is also the total path length.

Stretch and rotate particular part of SVG image

I'm making a web interactive test for musicians, and got stuck up on, well, interactiveness.
Users are supposed to move notes on a stave and adjust them.
SVG pathes are rendered as notes, with a separate parent div container for each note. Parent div is dragged on to the stave, and then can be resized ( I'm using jQuery UI for this, with option "handles" set to "e", so div can be resized only to the right). After this point I can not figure out how to correctly resize the SVG note inside it, because what needed to be resized, is not the whole SVG, but just one part.
SVGs look like this:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="32" viewBox="0 0 24 32" class="svgnote" preserveAspectRatio="none">
<path d="M0 23.703q0-0.922 0.672-1.797 0.313-0.344 0.766-0.711t1-0.727q0.531-0.25 1.031-0.359t0.953-0.109q0.953 0 1.688 0.531v-17.344h13.578v18.797q0 0.953-0.641 1.781-0.641 0.875-1.703 1.352t-2.047 0.477q-0.859 0-1.563-0.516t-0.703-1.375q0-0.984 0.703-1.797 0.609-0.797 1.719-1.438 0.578-0.25 1.055-0.359t0.93-0.109q0.969 0 1.703 0.531v-15.188h-12.484v16.641q0 0.953-0.641 1.781-0.641 0.875-1.695 1.352t-2.055 0.477q-0.891 0-1.594-0.516-0.672-0.516-0.672-1.375z"></path>
</svg>
Picture example
I added a picture, where above red figure
it's an initial state of a note;
upper red arrow is pointing out on a line, which is the only part of svg that needs to stretch out to the right.
lower red arrows aside -- the note should (somehow?) be rotated up and down, to make 3rd state possible
is what final state of note I'm looking for.
What I have done:
except excessive googling, not much. I tried to set "width" of SVG image to "100%" of the parent div, and add preserveAspectRatio="none", but all I got is ugly stretched note.
As for rotation I do not have even a single idea from what should I start.
I'd be eternally grateful if someone point out for what should I google, or maybe a library should I use. I'm sensing a solution to this is close somewhere, I'm just missing it because of my very limited experience in the field.
Thank you all.

Here's a 10mins hack. Connecting bar needs more work but the gist is use a collection of <symbol>for your musical notation and a better path (eg: polygon?) for the connecting bar.
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="note-1" viewBox="0 0 313 340">
<g xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,-1,313,340)" id="g11029">
<path d="M 303.13715,299.65106 C 299.74131,301.47103 297.93187,304.76561 299.04493,307.24402 C 300.23219,309.88766 304.31194,310.63374 308.15151,308.90939 C 311.99107,307.18503 314.14367,303.63999 312.95641,300.99636 C 311.76914,298.35272 307.6894,297.60664 303.84983,299.33099 C 303.60986,299.43876 303.36355,299.52973 303.13715,299.65106 z " style="opacity:0.9;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.2;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1" id="path11031"/>
<path d="M 299.50465,305.98445 L 299.50465,339.57202" style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path11033"/>
</g>
</symbol>
<g class="first" transform="translate(0,20)">
<use xlink:href="#note-1" />
</g>
<g class="second" transform="translate(30,10)">
<use xlink:href="#note-1" />
</g>
<path stroke-width="4" stroke="black" d="M87,20 L117,10"></path>
</svg>

SVG Inkscape generated file does not show flowRoot objects on browser

I´m dealing with SVG file in order to make some realtime animations on browser using AJAX.
Everything is fine except to make the browser (Chrome or IE9) to show the SVG image. The following HTML file does not show the flowRoot Text:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="744.09448"
height="600"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="lcl22.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.7"
inkscape:cx="175.99454"
inkscape:cy="282.7269"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="706"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-452.36215)">
<path
sodipodi:type="arc"
style="fill:#008000;fill-opacity:1;stroke:#495677;stroke-width:23.16900063;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="circle1"
sodipodi:cx="227.14285"
sodipodi:cy="156.6479"
sodipodi:rx="47.142857"
sodipodi:ry="44.285713"
d="m 274.28571,156.6479 c 0,24.45833 -21.10658,44.28572 -47.14286,44.28572 C 201.10657,200.93362 180,181.10623 180,156.6479 c 0,-24.45832 21.10657,-44.28571 47.14285,-44.28571 26.03628,0 47.14286,19.82739 47.14286,44.28571 z"
inkscape:label="#path2985"
transform="translate(12.857143,635.71428)" />
<rect
style="fill:#00ff00;fill-opacity:1;stroke:#495677;stroke-width:4.86899996;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="box1"
width="284.28571"
height="110"
x="312.85715"
y="738.07648"
inkscape:label="#box1" />
<flowRoot
xml:space="preserve"
id="flowRoot3058"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;text-anchor:middle;text-align:center"
transform="translate(0,452.36215)"><flowRegion
id="flowRegion3060"><rect
id="rect3062"
width="365.71429"
height="100"
x="221.42857"
y="145.71428"
style="text-anchor:middle;text-align:center" /></flowRegion><flowPara
id="flowPara3064"
style="font-weight:bold;-inkscape-font-specification:Sans Bold">LCL22 TEST</flowPara></flowRoot> </g>
</svg>
I´ve tried to change the code to version 1.2 by changing the following line, but did not solve the problem...
version="1.2"
I need a easy way to edit and bring custom vector graphics to browser. I thought SVG would be a piece of cake, but I´m running aroud these kind of problems...
Any help appreciated.
Rds

The SVG 1.2 Full specification was never completed (as you can see from the link it's still in draft from 2005) and only Inkscape ever supported flowRoot I think. I don't think it's intended that flowRoot will be part of SVG 2 either as that is likely to implement flowing text with a different and more CSS compatible mechanism so flowRoot is best avoided.
Use the Convert to text" command in the Text menu to convert it to SVG 1.1 compliant text.

As others have said, you can use convert to text or unflow to remove the flowRoot.
Keep in mind however that the text will no longer stay within the boundary you specified.
To avoid flowRoot going forward, just click with the text tool and start typing rather that first dragging to set a bound for it.
To creat text that fits within a bounding box, I'm not sure what the best method is.