You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by Subhrajyoti Moitra <sm...@sapient.com> on 2005/12/05 12:26:29 UTC
How to replace text content in SVG image?
Hi People,
I have a problem in replacing text content in a SVG image.
I have text content in the image. I want to replace these texts
dynamically, during runtime.
So suppose I have the following text, in the template image
<text x="73" y="153" id="samp1_textid1"
transform="matrix(4.69488,0,1.6271e-006,4.98689,-133.402,-685.949)">
Template text to be replaced by the user.
</text>
The user enters some text from a web form that should appear instead of
the standard text in the image. Then he generates a PNG/TIFF image out
of the final modified (containing his values) SVG image.
So far what I did was used simple DOM API to find out all <text> tags
and then get the next child and do a node replace of that text node with
that of the user values, all using DOM API.
For simple text content like the one above, this approach is working,
but imagine a content like the one below,
<text id="XMLID_4_" transform="matrix(2.0887 0 0 1 430.5 204.6079)">
<tspan x="0" y="0" fill="#4D1083"
font-family="'BookAntiqua-Bold'" font-size="76.4411">G</tspan>
<tspan x="0" y="91.941" fill="#4D1083"
font-family="'BookAntiqua-Bold'" font-size="76.4411">R</tspan>
<tspan x="0" y="183.882" fill="#4D1083"
font-family="'BookAntiqua-Bold'" font-size="76.4411">A</tspan>
<tspan x="0" y="275.823" fill="#4D1083"
font-family="'BookAntiqua-Bold'" font-size="76.4411">D</tspan>
<tspan x="0" y="367.764" fill="#4D1083"
font-family="'BookAntiqua-Bold'" font-size="76.4411"> !</tspan>
</text>
For this my algo above wont work. How do I go about solving the problem.
On top of this, in Illustrator images I also saw the following for which
my algo wont work.
<switch i:objectNS="&ns_flows;" i:objectType="pointText">
<foreignObject requiredExtensions="&ns_flows;" x="0" y="0" width="1"
height="1" overflow="visible">
<flowDef xmlns="&ns_flows;">
<region>
<path d="M197.5,159.394"/>
</region>
<flow xmlns="&ns_flows;" fill="#F9DB7F" stroke="#BF360C"
font-family="'Georgia-Bold'" font-size="46.0015"
a:adobe-horizontal-scale="0.7833">
<p><span>Joun Us</span></p>
<p><span>Party on 31st Dec</span></p>
</flow>
</flowDef>
<x:targetRef xlink:href="#XMLID_10_" />
</foreignObject>
<text id="XMLID_10_" transform="matrix(0.7833 0 0 1 197.4995 159.3936)">
<tspan x="0" y="0" fill="#F9DB7F" stroke="#BF360C"
font-family="'Georgia-Bold'" font-size="46.0015">Joun Us</tspan>
<tspan x="0" y="55.001" fill="#F9DB7F" stroke="#BF360C"
font-family="'Georgia-Bold'" font-size="46.0015">Party on 31st
Dec</tspan>
</text>
</switch>
Notice that the above not only uses the span in the text element, it is
actually referred to by the foreignObject thingy.
My intention is to replace all the text in the image with the user
values, retaining the flow path or the orientation of the text.
Please advice.
Thanks a lot in advance,
Subhro.
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
Re: How to replace text content in SVG image?
Posted by th...@kodak.com.
Hi Subhro,
"Subhrajyoti Moitra" <sm...@sapient.com> wrote on 12/05/2005 06:26:29
AM:
> I have text content in the image. I want to replace these texts
> dynamically, during runtime.
[...]
> So far what I did was used simple DOM API to find out all <text> tags
> and then get the next child and do a node replace of that text node with
> that of the user values, all using DOM API.
> For simple text content like the one above, this approach is working,
> but imagine a content like the one below,
>
>
> <text id="XMLID_4_" transform="matrix(2.0887 0 0 1 430.5 204.6079)">
> <tspan x="0" y="0" fill="#4D1083"
> font-family="'BookAntiqua-Bold'" font-size="76.4411">G</tspan>
> <tspan x="0" y="91.941" fill="#4D1083"
> font-family="'BookAntiqua-Bold'" font-size="76.4411">R</tspan>
> <tspan x="0" y="183.882" fill="#4D1083"
> font-family="'BookAntiqua-Bold'" font-size="76.4411">A</tspan>
> <tspan x="0" y="275.823" fill="#4D1083"
> font-family="'BookAntiqua-Bold'" font-size="76.4411">D</tspan>
> <tspan x="0" y="367.764" fill="#4D1083"
> font-family="'BookAntiqua-Bold'" font-size="76.4411"> !</tspan>
> </text>
>
> For this my algo above wont work. How do I go about solving the problem.
> On top of this, in Illustrator images I also saw the following for which
> my algo wont work.
This is a problem of understanding the 'intent' of the author based
on the contents of the SVG file. This is not so easy with the way
Illustrator encodes things. So the above is 'intended' to be vertical
text starting at 430.5, 204.6079.
> <switch i:objectNS="&ns_flows;" i:objectType="pointText">
> <foreignObject requiredExtensions="&ns_flows;" x="0" y="0" width="1"
> height="1" overflow="visible">
> <flowDef xmlns="&ns_flows;"> [...]</flowDef>
> <x:targetRef xlink:href="#XMLID_10_" />
> </foreignObject>
>
> <text id="XMLID_10_" transform="matrix(0.7833 0 0 1 197.4995 159.3936)">
> <tspan x="0" y="0" [...]>Joun Us</tspan>
> <tspan x="0" y="55.001" [...]>Party on 31st Dec</tspan>
> </text>
> </switch>
>
> Notice that the above not only uses the span in the text element, it is
> actually referred to by the foreignObject thingy.
The foreignObject is actually a bit misleading. Illustrator uses
it to embed some 'higher level info' (some of which might be useful to
you some of it not). The real 'SVG' rendering comes from the normal
'text' element. It might be important if you needed to reimport the
SVG int Illustrator but that is generally problematic as even before
anyone has messed with it Illustrator can have some issues importing
complex SVG.
> My intention is to replace all the text in the image with the user
> values, retaining the flow path or the orientation of the text.
I think the only real way to do this is to have 'hacks' in your
code for the cases you want to handle. So the first 'complex' example
would have to be replaced with a normal text element with
writing-mode="tb" and glyph-orientation-vertical="0deg". Your second
complex example is almost hopeless because the 'flowed' text
doesn't even really have a flow region so you can't replace the
stuff with one of the Batik flow region extension. All you know
is that the author put two 'short' lines of text. Also you have an
issue of how does your customer indicate where the line break should
occur (or should it be 'auto wrapped').
In the end probably the best thing to do would be to get the
artist to work with you. First they could avoid some Illustrator
features (like multi-line text attached to a point - rather than
a region). They could also 'tag' text using the 'name' features
of Illustrator, the 'name' of the element ends up as the 'id', so
your author could label 'vertical' text with a name of 'vertical_1',
letting your substitution tool know that it should use writing-mode.
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org