Hi Holger
Thanks for the help. I followed your steps but I am not able to
accomplish my task correctly
Can you check whether my code is correct:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
<svg width="640" height="320" viewBox="0 0 640 320" onload="adjustText(evt)"
version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
<script><![CDATA[
var textwidth = 0;
var pathlength = 0;
var maxLineWidth = 10;
function adjustText(evt)
{
svgdoc = evt.target.ownerDocument;
textobj = svgdoc.getElementById("textattract");
pathobj = svgdoc.getElementById("attract");
textwidth = textobj.getComputedTextLength();
pathlength = pathobj.getTotalLength();
if ( textwidth > maxLineWidth )
{
textobj.setAttribute("font-size",10);
}
}
]]></script>
<image x="0" y="0" width="640" height="320"
xlink:href="ibwimage.jpg">
</image>
<path id="attract" style="fill:none" d="M 177,235 C 160,235 160,115 180,115 "/>
<text style="fill:white;font-size:25 ;font-family:Verdana;font-weight:bold">
<textPath id="textattract" startOffset="50%" style = "text-anchor:middle"
xlink:href="#attract">
ATTRACT
</textPath>
</text>
<path id="persuade" style="fill:none" d="M 270,250 C 240,250 240,115 270,115 "/>
<text style="fill:white;font-size:25;font-family:Verdana;font-weight:bold">
<textPath startOffset="50%" style = "text-anchor:middle" xlink:href="#persuade">
PERSUADE
</textPath>
</text>
<path id="convert" style="fill:none" d="M 350,250 C 320,250 320,120 350,120"/>
<text style="fill:white;font-size:25;font-family:Verdana;font-weight:bold">
<textPath startOffset="50%" style = "text-anchor:middle" xlink:href="#convert">
CONVERT
</textPath>
</text>
<path id="retain" style="fill:none" d="M 417,235 C 390,235 390,135 420,135"/>
<text style="fill:white;font-size:25;font-family:Verdana;font-weight:bold">
<textPath startOffset="50%" style = "text-anchor:middle" xlink:href="#retain">
RETAIN
</textPath>
</text>
Apart from this what is the general way to print any variable for debugging
purposes.
Also Holger in the above code in order to zoom only horizontally I just changed
the viewbox to "0 0 960 320" keeping width and height constant. But I expected
teh SVG to get elongated horizontally ( with all the text elongating elatively
) but it behaved very peculiarly. Can you sugest how to do this and if possible
incorporate the changes needed in the above code. I have attached the image I
am referencing in the SVG along with this mail.
THanks
ganesh
Holger Will <[EMAIL PROTECTED]> wrote:
Ganesh Jothikumar wrote:
> Hi Holger
> Thank You for the answer. It was very helpfult. Just a
> couple of more questions.
>
> 1) In the same code
>
>
> <path id="attract" style="fill:none" d="M 177,235 C 160,235 160,115
> 180,115 "/>
>
> <text style="fill:white;font-size:25
> ;font-family:Verdana;font-weight:bold">
>
> <textPath startOffset="50%" style = "text-anchor:middle"
> xlink:href="#attract">
>
> ATTRACT
>
> </textPath>
>
> </text>
>
>
> If u see now I am able to place the text "Attract" in teh center of
> the curve. So now this string will not be hardcoded and it will be a
> parameter that we will be passing during runtime. So is it possible to
> find if the string exceeds the length of the curve and if so autofit
> the string within teh curve.
i think you will need some script, something along the lines:
a=determine path length with getTotalLength()
b= determin string length with getComputedTextLength()
newfontsize = a * fontsize / b
> Also can I have multilingual strings displayed.
yes, you would use switch for that
see: http://www.w3.org/TR/SVG/struct.html#SwitchElement
but dont ask me about switch,ive never used it...
>
> 2) Regarding my question on zooming the image only horizontally and
> not vertically ur answer was to use preserveaspectratio=none. Can I
> get a code snippet of how this is done programmatically.
<svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";
preserveAspectRatio="none" viewBox="0 0 100 100">
<script>
function zoom(){
var vb=document.documentElement.getAttribute("viewBox").split(" ")
document.documentElement.setAttribute("viewBox",vb[0]+" "+vb[1]+"
"+vb[2]*2+" "+vb[3])
}
</script>
<g onclick="zoom()">
<circle cx="50" cy="50" r="50" fill="red"/>
<circle cx="150" cy="50" r="50" fill="green"/>
<circle cx="250" cy="50" r="50" fill="blue"/>
<circle cx="350" cy="50" r="50" fill="yellow"/>
</g>
</svg>
hth
Holger
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
---------------------------------
Yahoo! Groups Links
To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.
__________________________________________________
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
[Non-text portions of this message have been removed]
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
