I've put some text inside a rectangle using inkscape so the tree is like
<svg:rect><svg:text><svg:tspan>text....
The problem is, I can't see the text. I've tried fiddling with the opacity of the rect to no avail. There should be a way of doing this from the UI?
Edit
example as requested
<?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="184.25197"
height="262.20471"
id="svg2"
sodipodi:version="0.32"
inkscape:version="0.46"
version="1.0"
sodipodi:docname="ex1.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape">
<defs
id="defs4">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 526.18109 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 526.18109 : 1"
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective10" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
gridtolerance="10000"
guidetolerance="10"
objecttolerance="10"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.64"
inkscape:cx="195.9221"
inkscape:cy="335.3072"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="640"
inkscape:window-height="675"
inkscape:window-x="44"
inkscape:window-y="44" />
<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" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="opacity:0.25480766;fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:12.94795799;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2383"
width="150.87796"
height="84.226181"
x="18.221733"
y="39.557121">
<text
xml:space="preserve"
style="font-size:56.0331955px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
x="44.815186"
y="114.0088"
id="text2385"
transform="scale(1.0054479,0.9945816)"><tspan
sodipodi:role="line"
id="tspan2387"
x="44.815186"
y="114.0088">text</tspan></text>
</rect>
</g>
</svg>
I'd expect to be able to see this in inkscape.
The workaround is to put text on a layer above the box (the intent is that the box obscures the layers below it) and not try and get clever with nested tags. Shame it doesn't work though.
To use it: Write the text on the canvas (or copy-paste it). Create the path or shape that the text is supposed to fill. With the Selector tool, select the shape and the text, then use Text ‣ Flow into Frame.
Make sure to have the "Relative to" setting set on "Biggest object", and not the default "Page" setting. Then click on the third icon of both rows of the alignment settings, to center the text both vertically and horizontally inside the rectangle.
Creating a text object is as simple as switching to the Text tool ( F8 ), clicking somewhere in the document, and typing your text. To change font family, style, size, and alignment, open the Text and Font dialog ( Shift + Ctrl + T ).
A rect element can't contain text elements, that's invalid according to the svg specification and will simply be ignored by compliant user agents.
Just put the text after the rect element to have them render on top.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With