Anyone answer this SVG query?

[Mighty]

I am just starting to look into SVG as a possible means of generating graphs on the fly from a database. I have been trying to manually generate a graph just to get used to the code. However, I can't get the text (highlighted in italics below) to display. Any ideas why??

<?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?>
<!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.0//EN&quot;
&quot;

http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd&quot;>

<svg width=&quot;500&quot; height=&quot;300&quot; xmlns=&quot;

http://www.w3.org/2000/svg&quot;>

<g transform=&quot;translate(30, 250) rotate(-90)&quot;>

<g id=&quot;axes&quot;>
<text x=&quot;300&quot; y=&quot;10&quot;>
<tspan fill=&quot;blue&quot;>300</tspan>
</text>
<line x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;0&quot; y2=&quot;300&quot; stroke=&quot;blue&quot;/>
<line x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;300&quot; y2=&quot;0&quot; stroke=&quot;blue&quot;/>
</g>

<rect x=&quot;0&quot; y=&quot;10&quot; height=&quot;20&quot; width=&quot;100&quot; stroke=&quot;black&quot; stroke-width=&quot;2&quot; fill=&quot;black&quot; />
<rect x=&quot;0&quot; y=&quot;40&quot; height=&quot;20&quot; width=&quot;200&quot; stroke=&quot;blue&quot; stroke-width=&quot;2&quot; fill=&quot;blue&quot; />
<rect x=&quot;0&quot; y=&quot;70&quot; height=&quot;20&quot; width=&quot;150&quot; stroke=&quot;green&quot; stroke-width=&quot;2&quot; fill=&quot;green&quot; />
<rect x=&quot;0&quot; y=&quot;100&quot; height=&quot;20&quot; width=&quot;170&quot; stroke=&quot;black&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; />
<rect x=&quot;0&quot; y=&quot;130&quot; height=&quot;20&quot; width=&quot;110&quot; stroke=&quot;black&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; />

<g id=&quot;chartLine&quot;>
<circle cx=&quot;80&quot; cy=&quot;20&quot; r=&quot;3&quot; fill=&quot;red&quot; stroke=&quot;red&quot; />
<line x1=&quot;80&quot; y1=&quot;20&quot; x2=&quot;150&quot; y2=&quot;50&quot; stroke=&quot;red&quot; stroke-width=&quot;2&quot; />
<circle cx=&quot;150&quot; cy=&quot;50&quot; r=&quot;3&quot; fill=&quot;red&quot; stroke=&quot;red&quot; />
<line x1=&quot;150&quot; y1=&quot;50&quot; x2=&quot;120&quot; y2=&quot;80&quot; stroke=&quot;red&quot; stroke-width=&quot;2&quot; />
<circle cx=&quot;120&quot; cy=&quot;80&quot; r=&quot;3&quot; fill=&quot;red&quot; stroke=&quot;red&quot; />
<line x1=&quot;120&quot; y1=&quot;80&quot; x2=&quot;140&quot; y2=&quot;110&quot; stroke=&quot;red&quot; stroke-width=&quot;2&quot; />
<circle cx=&quot;140&quot; cy=&quot;110&quot; r=&quot;3&quot; fill=&quot;red&quot; stroke=&quot;red&quot; />
<line x1=&quot;140&quot; y1=&quot;110&quot; x2=&quot;200&quot; y2=&quot;140&quot; stroke=&quot;red&quot; stroke-width=&quot;2&quot; />
<circle cx=&quot;200&quot; cy=&quot;140&quot; r=&quot;3&quot; fill=&quot;red&quot; stroke=&quot;red&quot; />
</g>

</g>

</svg>

Mighty

 

[aliinal]

hi,

problem is with your transform element in parent group. Your text is there but it's outside of your viewport.

Keep in mind that nearly all attributes on all elements are inherited by child elements.

For example if you add a transform attribute like transform=&quot;rotate(90) translate(-30,-250)&quot; to text element then it will appear in your viewport.
Placing the text in correct location is your job then

hope this helps
@li