transformToFragment to add content to an SVG document?

can anyone point me to a simple demonstration using
transformToFragment to transform xml content via an xsl stylesheet and
add it to an SVG document?

kind regards

Jonathan Chetwynd

struggling to negotiate the syntax and not sure this is a possible
route at all,

~:"

to an html document is done...

thanks to Thomas Meinike this is now fixed,

hard to be sure exactly what the issue had been but one likely
candidate is this syntax:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform
"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink
">

<xsl:output method="xml" encoding="utf-8"/>

kind regards

~:"

jsLint SVG Tidy

any takers?

my coding is pretty awful, and might benefit from a creative
adaptation for SVG of:

Douglas Crockford's jslint
and
Dave Raggett's HTML Tidy

cheers

~:"

--- In svg-developers@yahoogroups.com, ~:'' ありがとう�"ざいました
<j.chetwynd@...> wrote:
>
> jsLint SVG Tidy
>
> any takers?
>
> my coding is pretty awful, and might benefit from a creative
> adaptation for SVG of:
>
> Douglas Crockford's jslint
> and
> Dave Raggett's HTML Tidy
>
> cheers
>
> ~:"
>

I've been working off-and-on with my scour script:
http://codedread.com/scour/ and there is a rough online version:
http://planetsvg.com/tools/scour/scra.py/form

This won't correct errors in hand-written code, but it will neaten up
output from tools.

I just found out about SVGTidy: http://esw.w3.org/topic/SvgTidy

I'll be reading through that and thinking about adding features to scour.

Regards,
Jeff Schiller

I have some engines diagrams in SVG and when i look on IE everything is ok, but
when i use FF3 i only see the image and not the text, i think this issue is
related to the text functions, anyone knows if this is solved or have some way
to solve it?

On Mon, 03 Aug 2009 18:18:44 -0000
"oliver.cortinas" <olivercortinas@...> wrote:

> I have some engines diagrams in SVG and when i look on IE everything
> is ok, but when i use FF3 i only see the image and not the text, i
> think this issue is related to the text functions, anyone knows if
> this is solved or have some way to solve it?

One issue I remember with porting SVG from IE (and Batik) to FF
relating to text has to do with the font sizing. FF requires units, and
the others don't. This caused several of my apps to be much uglier
because the text defaulted their sizes.

I also remember that FF is stricter in it's handling of paths. (Some of
the others allow commas where the spec says they shouldn't be.)

HTH,
G. Wade
--
Systems develop goals of their own the instant they come into being.
                                                         -- John Gall

Hi oliver,

> I have some engines diagrams in SVG and when i look on IE

I'm assuming you are using IE+ASV...


> but when i use FF3 i only see the image and not the text,
> i think this issue is related to the text functions,

Can you provide a small SVG snippet containing a "faulty" text portion?


> anyone knows if this is solved or have some way to solve it?

As G. Wade has hinted, Firefox is a bit strict (and also a bit limited) in terms
of text handling (compared to some implementations). Stating which Firefox
version you are attempting with might help also (there were substantial
improvements in 3.0 and 3.5, for example).


Hope this helps,
  Helder

Hi all,

So i'm starting to build my own SVG, and have immediately run into a
comprehension problem on how viewboxes work. A (slightly simplified)
example:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="180mm"
height="180mm" viewBox="0 0 1800 1800">
     <svg:rect x="0" y="0" width="180mm" height="180mm"/>
     <svg:rect x="0" y="0" width="1800" height="1800"/>
</svg:svg>

Now, in my (obviously faulty) understanding of viewBox, these rects
should be the same size -- but they aren't; the second is roughly 2.5x
as large as the first. (As rendered by both oXygen 10.3's SVG Viewer and
Amaya 11.2.

(What i'm trying to figure out is how to have a drawing of a particular
size, that can be displayed at 96dpi or whatever and also printed at
300dpi, with "1px" being the appropriate size on both.)

What am i missing?

TIA,

--alex.

Hi alex,


> Now, in my (obviously faulty) understanding of viewBox, these rects
> should be the same size -- but they aren't; the second is roughly 2.5x
> as large as the first.

I guess there might be some confusion regarding viewboxes and unit handling. The
specification is pretty comprehensible in this scope [1]: there's a good amount
of information regarding the "viewBox" attribute [2], as well as units [3],
although I'd recommend a quick read through the whole chapter. Have you tried
it? ;-)


> (As rendered by both oXygen 10.3's SVG Viewer and
> Amaya 11.2.)

I'd also suggest Opera when testing SVG content: it's one of the best available
implementations [4]. Although apparently [5] oXygen uses Batik, which is also
among the best implementations available. Note that, currently, Amaya SVG
support is (unfortunately) still somehow limited [4] although it has gotten
substantially better with the 11.2 release. :-)


> (What i'm trying to figure out is how to have a drawing of a particular
> size, that can be displayed at 96dpi or whatever and also printed at
> 300dpi, with "1px" being the appropriate size on both.)

I recall this being discussed several times already, so you may find tightly
related threads by crawling this group's archive and/or the Batik mailing lists
archive [6] (where I've seen this also).


> TIA,

Hope this helps,
  Helder


[1] http://www.w3.org/TR/SVG11/coords.html
[2] http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute
[3] http://www.w3.org/TR/SVG11/coords.html#Units
[4] http://www.codedread.com/svg-support.php
[5] http://www.oxygenxml.com/svg_editor.html
[6] http://www.nabble.com/Batik-f308.html

Francis,

Thanks for your response. I will try this out.

-Andres


Francis Hemsher wrote:
>
>
> Hi Andres,
> Below are a facimile of two functions I use for various drag/drop
> needs at differing svg image sizes, scales, and viewboxes. The
> computVb() is called to set the public vars when scale and/or
> translate changes or the values need init.
> The second, dragMe(evt) is associated with translating the dragged
> element.
>
> This may help in your application.
> Regards,
> Francis
>
> function computeVB()
> {
> var viewBox=mySVG.getAttribute("viewBox")
> var vbSplit=viewBox.split(" ")
> VbOffsetX=parseFloat(vbSplit[0])
> VbOffsetY=parseFloat(vbSplit[1])
> var vbWidth=parseFloat(vbSplit[2])
> var vbHeight=parseFloat(vbSplit[3])
> var rePx=/px/
> var svgPixWidth=svgSpan.style.width
> var svgPixHeight=svgSpan.style.height
> svgPixWidth=svgPixWidth.replace(rePx,"")
> svgPixHeight=svgPixHeight.replace(rePx,"")
> VbRatioX=vbWidth/svgPixWidth;
> VbRatioY=vbHeight/svgPixHeight;
> SCALE= mySVG.currentScale;
> TX= mySVG.currentTranslate.x;
> TY= mySVG.currentTranslate.y;
>
> }
>
> function dragMe(evt)
> {
> var myX=((evt.getClientX()-TX)/SCALE)*VbRatioX+VbOffsetX
> var myY=((evt.getClientY()-TY)/SCALE)*VbRatioY+VbOffsetY
> }
>
> --- In svg-developers@yahoogroups.com
> <mailto:svg-developers%40yahoogroups.com>, "gonzo4819" <andres@...> wrote:
> >
> > I have an svg map that displays a particular background. It, of
> course, has its own particular viewbox setting. I also have some other
> smaller objects that are tagged in separate <svg></svg> pairs which
> have their own viewbox settings. This way I am able to scale both the
> background (which scales both the background and all of the smaller
> object on it) and the smaller graphic objects independently. That is,
> I can adjust the viewbox of a smaller object and it will change size
> wrt to the background, and I can change the overall scale of the
> background which adjusts everything.
> >
> > I also can drag the graphic objects all around the background. All
> of this seems to be working fine.
> >
> > However, when I am at the normal 1:1 settings for my viewboxes of
> both the background and the draggable objects, the dragging works
> fine. But when I adjust the background viewbox setting to reduce the
> whole page (background and draggable objects), the mouse does not
> track the object correctly when I drag it. That is, I can drag the
> smaller object across the page, but the mouse advances faster than the
> object until the mouse is no longer on the object. By the time I have
> dragged the mouse across the whole page, the mouse is inches away from
> the draggable object. Even when the mouse is no longer on the object,
> it still moves with the mouse (provided of course I keep the mouse
> button down and am actually dragging).
> >
> > So my question is do I have to adjust the mouse is some way when I
> zoom in and out of my svg image? How do I adjust the mouse coordinates
> when I have change the scaling or zooming by adjusting the viewbox
> settings?
> >
> > Does my question make sense???
> >
> > -Andres
> >
>
>

OK, it would appear that Eisenberg (SVG Essentials, O'Reilly 2002) is
simply wrong, and that puzzles the hell out of me. Here's a reproduction
of the viewport/viewBox used in example/figure 2-4, p.19:

<svg xmlns="http://www.w3.org/2000/svg" version="1.0"
      width="4cm" height="5cm" viewBox="0 0 64 80">

      <rect x="0cm" y="0cm" width="4cm" height="5cm" style="stroke:
green; fill: none"/>
      <rect x="0" y="0" width="64" height="80" style="stroke: blue; fill:
none"/>

</svg>

That figure in the book clearly shows the 4cm and 64 user-unit locations
on the x-axis to be the same, ditto with 5cm/80uu on the y-axis. My
rects, however, are again not the same size, the latter being a little
less than half the size of the former.

I'm still missing something extremely basic here...

--alex.

> Have you tried it? ;-)
Well, yes, not being /completely/ senile, yet. ;-)

But both the spec (and Eisenberg's _SVG Essentials_) keep saying things
like "The value of the viewBox attribute... specif[ies] a rectangle in
user space which should be mapped to the bounds of the viewport
established by the given element" -- nowhere have i seen anything even
hinting that the viewBox could be bigger than the viewport as declared
in the <svg> element.

It occurred to me in the shower this morning that the user agent might
be refusing to let 1 user coordinate "pixel" be smaller than the actual
current physical device pixel.


> I'd also suggest Opera when testing SVG content
This will end up being displayed on FireFox 3.x, which seems to be doing
OK so far.


> I recall this being discussed several times already, so you may find
> tightly related threads by crawling this group's archive and/or the
> Batik mailing lists archive [6] (where I've seen this also).
A simple search didn't bring up much, but i shall certainly spend some
more time doing that. Thank you for your patient and extensive answer to
what must be for regulars a pretty annoyingly common question.

--alex.

I am in need of a method to programatically set the SVG back to it's original
view. Any ideas are greatly appreciated.

Thanks.

Try,
mySVG.currentScale=1
mySVG.currentTranslate.x=0
mySVG.currentTranslate.y=0

Regards,
Francis


--- In svg-developers@yahoogroups.com, "zedkineece" <zedkineece@...> wrote:
>
> I am in need of a method to programatically set the SVG back to it's original
view. Any ideas are greatly appreciated.
>
> Thanks.
>

Hi Francis,

Thanks for the quick resonse. I should have been a bit more clearer.

I have a set of scripts that pan and zoom. The problem I have is when someone
uses the keyboard or context menu to pan and zoom. So I need to grab the
original viewbox and height/width attributes to set that original value.

Thanks again.


--- In svg-developers@yahoogroups.com, "Francis Hemsher" <fhemsher@...> wrote:
>
> Try,
> mySVG.currentScale=1
> mySVG.currentTranslate.x=0
> mySVG.currentTranslate.y=0
>
> Regards,
> Francis
>
>
> --- In svg-developers@yahoogroups.com, "zedkineece" <zedkineece@> wrote:
> >
> > I am in need of a method to programatically set the SVG back to it's
original view. Any ideas are greatly appreciated.
> >
> > Thanks.
> >
>

I'm using the below on an app to find the center point of the user's
area(dotX,dotY), plus their viewing area(box) rectangle top left and lower right
points:

	 SC=mySVG.currentScale

	 var transX=mySVG.currentTranslate.x;
	 var transY=mySVG.currentTranslate.y;
	 var dotX=(-transX+SvgWidth/2)/SC;
	 var dotY=(-transY+SvgHeight/2)/SC;
	 //---user's view area rect---
	 var boxW=(SvgWidth)/SC;
	 var boxH=(SvgHeight)/SC;
	 var boxX0=dotX-.5*boxW;
	 var boxY0=dotY-.5*boxH;
	 var boxX1=dotX+.5*boxW;
	 var boxY1=dotY+.5*boxH;

Could this be saved, as a 'snapshot' prior to when the user zooms/pans via the
Ctrl/Alt keys or context menu, and then recalled and used in your application?

Francis

--- In svg-developers@yahoogroups.com, "zedkineece" <zedkineece@...> wrote:
>
> Hi Francis,
>
> Thanks for the quick resonse. I should have been a bit more clearer.
>
> I have a set of scripts that pan and zoom. The problem I have is when someone
uses the keyboard or context menu to pan and zoom. So I need to grab the
original viewbox and height/width attributes to set that original value.
>
> Thanks again.
>
>
> --- In svg-developers@yahoogroups.com, "Francis Hemsher" <fhemsher@> wrote:
> >
> > Try,
> > mySVG.currentScale=1
> > mySVG.currentTranslate.x=0
> > mySVG.currentTranslate.y=0
> >
> > Regards,
> > Francis
> >
> >
> > --- In svg-developers@yahoogroups.com, "zedkineece" <zedkineece@> wrote:
> > >
> > > I am in need of a method to programatically set the SVG back to it's
original view. Any ideas are greatly appreciated.
> > >
> > > Thanks.
> > >
> >
>

I have some javascript in an svg file that handles async requests
(XMLHttpRequest, importNode, appendChild). It works in Google Chrome.

I've tried various things in IE 7 Adobe SVG 3.3, and can't get them to work.

Can someone point me to an svg file that handles async requests in IE with Adobe
SVG 3?

You also may want to consider disabling the context and or alt/ctrl zoom and
pan.
To disable the context, add the following to the top SVG:

onmousedown="evt.preventDefault()" onmouseup="evt.preventDefault()"

To disable the Ctrl/Alt keys:

  zoomAndPan="disable"

Francis


--- In svg-developers@yahoogroups.com, "Francis Hemsher" <fhemsher@...> wrote:
>
> I'm using the below on an app to find the center point of the user's
area(dotX,dotY), plus their viewing area(box) rectangle top left and lower right
points:
>
>  SC=mySVG.currentScale
>
>  var transX=mySVG.currentTranslate.x;
>  var transY=mySVG.currentTranslate.y;
>  var dotX=(-transX+SvgWidth/2)/SC;
>  var dotY=(-transY+SvgHeight/2)/SC;
>  //---user's view area rect---
>  var boxW=(SvgWidth)/SC;
>  var boxH=(SvgHeight)/SC;
>  var boxX0=dotX-.5*boxW;
>  var boxY0=dotY-.5*boxH;
>  var boxX1=dotX+.5*boxW;
>  var boxY1=dotY+.5*boxH;
>
> Could this be saved, as a 'snapshot' prior to when the user zooms/pans via the
Ctrl/Alt keys or context menu, and then recalled and used in your application?
>
> Francis
>
> --- In svg-developers@yahoogroups.com, "zedkineece" <zedkineece@> wrote:
> >
> > Hi Francis,
> >
> > Thanks for the quick resonse. I should have been a bit more clearer.
> >
> > I have a set of scripts that pan and zoom. The problem I have is when
someone uses the keyboard or context menu to pan and zoom. So I need to grab the
original viewbox and height/width attributes to set that original value.
> >
> > Thanks again.
> >
> >
> > --- In svg-developers@yahoogroups.com, "Francis Hemsher" <fhemsher@> wrote:
> > >
> > > Try,
> > > mySVG.currentScale=1
> > > mySVG.currentTranslate.x=0
> > > mySVG.currentTranslate.y=0
> > >
> > > Regards,
> > > Francis
> > >
> > >
> > > --- In svg-developers@yahoogroups.com, "zedkineece" <zedkineece@> wrote:
> > > >
> > > > I am in need of a method to programatically set the SVG back to it's
original view. Any ideas are greatly appreciated.
> > > >
> > > > Thanks.
> > > >
> > >
> >
>

Hi Peter,
I have a bunch of examples that use this at:
http://www.mobiusPortal.com

The code is available to view at each example.

Regards,
Francis

--- In svg-developers@yahoogroups.com, "Peter Thompson" <plthompson2004@...>
wrote:
>
> I have some javascript in an svg file that handles async requests
(XMLHttpRequest, importNode, appendChild). It works in Google Chrome.
>
> I've tried various things in IE 7 Adobe SVG 3.3, and can't get them to work.
>
> Can someone point me to an svg file that handles async requests in IE with
Adobe SVG 3?
>

Perhaps XMLHttpRequest will not work inside the adobe plugin (if it does not
implement the object or allows to instantiate an activeX). I guess that you
could always put the javascript in a html file and reference the svg file in
a iframe tag and communicate between them via windows.parent, for example...


--
Luis Vielva
Profesor Titular de Universidad
Grupo de Tratamiento Avanzado de Se�al
Departamento de Ingenier�a de Comunicaciones
Laboratorios de I+D+i
Universidad de Cantabria


[Non-text portions of this message have been removed]

After searching the archives and reading the spec, i still have some
sort of mental block about the viewBox and user units. If someone could
show me what a svg tag would look like that would print an area of 8" x
10", at 300dpi, such that a line with a stroke-size of 1px is 1/300"
wide, and 10pt text is 10pt, i'd very much appreciate it. (Most of the
samples i've found are in dimensionless user units, and i simply don't
understand how long "20" is.)

Thanks,

--alex.

viewBox / preserveAspectRatio / view/width / units / clipping (?) / overflow
seem like things people have a hard time understanding, both as standalone SVG,
or 'embedded' in HTML or other SVG

Maybe you could make an interactive experiment that shows how all (many of)
these things work, to save people a lot of time figuring it out. That would make
good content for planetsvg.com

Anyway, good luck



--- In svg-developers@yahoogroups.com, alex <alyxtmp-netbeans@...> wrote:
>
> After searching the archives and reading the spec, i still have some
> sort of mental block about the viewBox and user units. If someone could
> show me what a svg tag would look like that would print an area of 8" x
> 10", at 300dpi, such that a line with a stroke-size of 1px is 1/300"
> wide, and 10pt text is 10pt, i'd very much appreciate it. (Most of the
> samples i've found are in dimensionless user units, and i simply don't
> understand how long "20" is.)
>
> Thanks,
>
> --alex.
>

That's an excellent suggestion, and after playing around with basic
settings, i think i've finally got a handle on things...  Apparently you
can have a resolution higher than the default (screen), or
properly-sized absolute units (in, cm, etc.), but not both at the same
time, as the sizes of the latter are calculated based on the initial
(screen) resolution.

So, a 1" x 1", 300dpi graphic would look something like:

// 1" at screen resolution - <object> won't take absolute units
(<object width="96" height="96">)

<svg width="96" height="96" viewBox="0 0 300 300"
preserveAspectRatio="xMinYMin meet">

(etc.)

</svg>
(</object>)

However, within the graphic, "1in" won't be 1in, but rather 96/300 =
0.32in.  This, coupled with the fact that you can't use absolute units
in <path> data, would seem to make them pretty much useless in any case
other than a non-transformed, screen-destined graphic. Which i suppose
the spec does get around to pointing out, but i sure wish _SVG
Essentials_ had. As i'm just about to roof-test the damn thing, has
anyone a recommendation for a good (and recent) SVG book?

If i'm *still* wrong, please correct me; otherwise, hope this might help
any other pathetic newbies with this same confusion in the future.

--alex.

steltenpower wrote:
>
>
> viewBox / preserveAspectRatio / view/width / units / clipping (?) /
> overflow seem like things people have a hard time understanding, both as
> standalone SVG, or 'embedded' in HTML or other SVG
>
> Maybe you could make an interactive experiment that shows how all (many
> of) these things work, to save people a lot of time figuring it out.
> That would make good content for planetsvg.com
>
> Anyway, good luck
>
> --- In svg-developers@yahoogroups.com
> <mailto:svg-developers%40yahoogroups.com>, alex <alyxtmp-netbeans@...>
> wrote:
>  >
>  > After searching the archives and reading the spec, i still have some
>  > sort of mental block about the viewBox and user units. If someone could
>  > show me what a svg tag would look like that would print an area of 8" x
>  > 10", at 300dpi, such that a line with a stroke-size of 1px is 1/300"
>  > wide, and 10pt text is 10pt, i'd very much appreciate it. (Most of the
>  > samples i've found are in dimensionless user units, and i simply don't
>  > understand how long "20" is.)
>  >
>  > Thanks,
>  >
>  > --alex.

Hello,

I am fairly inexperienced with SVG and I cant accomplish a seemingly easy task.

I have a svg file that displays a bar plot with 1 bar. I am trying to change its
color and display some text with onmouseover/onmouseout events but its not
working.

I could achieve the same effect setting the CSS attribute of the SVG rect object
using mouseover/mouseout, in most browsers (*not in Firefox). This code is
commented out.

I would really appreciate if someone points out my mistake.
Thanks,
Raktim

**** SVG Code *****
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd" ><svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="700" height="400" overflow="visible">
   <script type="text/ecmascript"><![CDATA[
		 var svgNS = "http://www.w3.org/2000/svg";
		 var xlinkNS = "http://www.w3.org/1999/xlink";

		 function changeText(evt, ratio, gene, probe, start)
		 {
      		    //evt.target.setAttributeNS(null,"fill","red");
		    evt.target.setAttribute("fill", "red");

		    targetProbetext = document.getElementById("Probe");
		    targetRatiotext = document.getElementById("Ratio");
		    targetGenetext = document.getElementById("Gene");
		    targetStarttext = document.getElementById("Start");

		    var newProbeText = document.createTextNode("Probe : " + probe);
		    var newRatioText = document.createTextNode("Log Ratio : " + ratio);
		    var newGeneText = document.createTextNode("Gene : " + gene);
		    var newStartText = document.createTextNode("Start BP : " + start);

		    targetProbetext.replaceChild(newProbeText,targetProbetext.firstChild);
		    targetRatiotext.replaceChild(newRatioText,targetRatiotext.firstChild);
		    targetGenetext.replaceChild(newGeneText,targetGenetext.firstChild);
		    targetStarttext.replaceChild(newStartText,targetStarttext.firstChild);
		    //
		 }
		 function changeTextNotOver(evt)
		 {
		    //evt.target.setAttributeNS(null,"fill","rgb(251,159,84);");
		    evt.target.setAttribute("fill", "rgb(251,159,84);");

		    targetProbetext=document.getElementById("Probe");
		    targetRatiotext=document.getElementById("Ratio");
		    targetGenetext=document.getElementById("Gene");
		    targetStarttext=document.getElementById("Start");

		    var newProbeText = document.createTextNode("Probe : ");
		    var newRatioText = document.createTextNode("Log Ratio : ");
		    var newGeneText = document.createTextNode("Gene : ");
		    var newStartText = document.createTextNode("Start BP : ");

		    targetProbetext.replaceChild(newProbeText,targetProbetext.firstChild);
		    targetRatiotext.replaceChild(newRatioText,targetRatiotext.firstChild);
		    targetGenetext.replaceChild(newGeneText,targetGenetext.firstChild);
		    targetStarttext.replaceChild(newStartText,targetStarttext.firstChild);
		 }

		 ]]></script>
   <desc>Genome Browser</desc>
   <g transform="translate(10,10) scale(0.28)">
     <text id="Probe" x="200" y="50" font-size="55" style="fill:rgb(200, 150,
200)">Probe :</text>
     <text id="Ratio" x="200" y="120" font-size="55" style="fill:rgb(200, 150,
200)">Log Ratio :</text>
     <text id="Gene" x="200" y="190" font-size="55" style="fill:rgb(200, 150,
200)">Gene :</text>
     <text id="Start" x="200" y="250" font-size="55" style="fill:rgb(200, 150,
200)">StartBP :</text>
     <g style="stroke-width:5; stroke:black">
       <path d="M 0 700 L 362 700 Z"/>
       <path d="M 0 0 L 0 700 Z"/>
     </g>

     <a
xlink:href="http://www.ncbi.nlm.nih.gov/sites/entrez?db=gene&cmd=search&\
term=NDUFV3" target="new">
       <rect id="123" style="fill:blue;" height="700" width="70" y="0" x="100"
onmouseover="changeText(evt, 3, 'NDUFV3', 'A_23_P211285',43202005)"
onmouseout="changeTextNotOver(evt)">
         <!-- <set attributeName="fill" attributeType="CSS" to="red"
begin="mouseover" end="mouseout"/> -->
       </rect>
     </a>

   </g>
</svg>

Hi Raktim,


When changing text content, try:
mytextElem.firstChild.setData("my new text")


Also has 'document' been defined at the SVG document?

In SVG you'll find its much easier to init/access style attribute names and
values rather than using 'style':
<text fill="red" ... />

Regards,
Francis

--- In svg-developers@yahoogroups.com, "raktims" <raktim.sinha@...> wrote:
>
> Hello,
>
> I am fairly inexperienced with SVG and I cant accomplish a seemingly easy
task.
>
> I have a svg file that displays a bar plot with 1 bar. I am trying to change
its color and display some text with onmouseover/onmouseout events but its not
working.
>
> I could achieve the same effect setting the CSS attribute of the SVG rect
object using mouseover/mouseout, in most browsers (*not in Firefox). This code
is commented out.
>
> I would really appreciate if someone points out my mistake.
> Thanks,
> Raktim
>
> **** SVG Code *****
> <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd" ><svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="700" height="400" overflow="visible">
>   <script type="text/ecmascript"><![CDATA[
> 	 var svgNS = "http://www.w3.org/2000/svg";
> 	 var xlinkNS = "http://www.w3.org/1999/xlink";
>
> 	 function changeText(evt, ratio, gene, probe, start)
> 	 {
>       		   //evt.target.setAttributeNS(null,"fill","red");
> 		   evt.target.setAttribute("fill", "red");
>
> 		   targetProbetext = document.getElementById("Probe");
> 		   targetRatiotext = document.getElementById("Ratio");
> 		   targetGenetext = document.getElementById("Gene");
> 		   targetStarttext = document.getElementById("Start");
>
> 		   var newProbeText = document.createTextNode("Probe : " + probe);
> 		   var newRatioText = document.createTextNode("Log Ratio : " + ratio);
> 		   var newGeneText = document.createTextNode("Gene : " + gene);
> 		   var newStartText = document.createTextNode("Start BP : " + start);
>
> 		   targetProbetext.replaceChild(newProbeText,targetProbetext.firstChild);
> 		   targetRatiotext.replaceChild(newRatioText,targetRatiotext.firstChild);
> 		   targetGenetext.replaceChild(newGeneText,targetGenetext.firstChild);
> 		   targetStarttext.replaceChild(newStartText,targetStarttext.firstChild);
> 		   //
> 	 }
> 	 function changeTextNotOver(evt)
> 	 {
> 		   //evt.target.setAttributeNS(null,"fill","rgb(251,159,84);");
> 		   evt.target.setAttribute("fill", "rgb(251,159,84);");
>
> 		   targetProbetext=document.getElementById("Probe");
> 		   targetRatiotext=document.getElementById("Ratio");
> 		   targetGenetext=document.getElementById("Gene");
> 		   targetStarttext=document.getElementById("Start");
>
> 		   var newProbeText = document.createTextNode("Probe : ");
> 		   var newRatioText = document.createTextNode("Log Ratio : ");
> 		   var newGeneText = document.createTextNode("Gene : ");
> 		   var newStartText = document.createTextNode("Start BP : ");
>
> 		   targetProbetext.replaceChild(newProbeText,targetProbetext.firstChild);
> 		   targetRatiotext.replaceChild(newRatioText,targetRatiotext.firstChild);
> 		   targetGenetext.replaceChild(newGeneText,targetGenetext.firstChild);
> 		   targetStarttext.replaceChild(newStartText,targetStarttext.firstChild);
> 	 }
>
> 	 ]]></script>
>   <desc>Genome Browser</desc>
>   <g transform="translate(10,10) scale(0.28)">
>     <text id="Probe" x="200" y="50" font-size="55" style="fill:rgb(200, 150,
200)">Probe :</text>
>     <text id="Ratio" x="200" y="120" font-size="55" style="fill:rgb(200, 150,
200)">Log Ratio :</text>
>     <text id="Gene" x="200" y="190" font-size="55" style="fill:rgb(200, 150,
200)">Gene :</text>
>     <text id="Start" x="200" y="250" font-size="55" style="fill:rgb(200, 150,
200)">StartBP :</text>
>     <g style="stroke-width:5; stroke:black">
>       <path d="M 0 700 L 362 700 Z"/>
>       <path d="M 0 0 L 0 700 Z"/>
>     </g>
>
>     <a
xlink:href="http://www.ncbi.nlm.nih.gov/sites/entrez?db=gene&cmd=search&\
term=NDUFV3" target="new">
>       <rect id="123" style="fill:blue;" height="700" width="70" y="0" x="100"
onmouseover="changeText(evt, 3, 'NDUFV3', 'A_23_P211285',43202005)"
onmouseout="changeTextNotOver(evt)">
>         <!-- <set attributeName="fill" attributeType="CSS" to="red"
begin="mouseover" end="mouseout"/> -->
>       </rect>
>     </a>
>
>   </g>
> </svg>
>

On Mon, 10 Aug 2009 01:45:39 +0200, raktims <raktim.sinha@...> wrote:

> Hello,
>
> I am fairly inexperienced with SVG and I cant accomplish a seemingly easy
task.
>
> I have a svg file that displays a bar plot with 1 bar. I am trying to change
its color and display some text with onmouseover/onmouseout events but its not
working.
>
> I could achieve the same effect setting the CSS attribute of the SVG rect
object using mouseover/mouseout, in most browsers (*not in Firefox). This code
is commented out.
>
> I would really appreciate if someone points out my mistake.
> Thanks,
> Raktim

I'd be surprised if something like this didn't work:

<style type="text/css">
    #123:hover { fill: green; }
</style>

Cheers
/Erik

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

--- In svg-developers@yahoogroups.com, Robin Berjon <robin@...> wrote:
>
> On Jul 10, 2009, at 12:47 , Carel Plantagie wrote:
> > I've managed to convert the 1st, but how can I convert the 2nd?
> >
>
>
> Why not just copy over the text?
>
> --
> Robin Berjon - http://berjon.com/
>      Feel like hiring me? Go to http://robineko.com/
>


OK, since I got no other suggestions, I changed the code like Robin suggested -
a lot of work, but now I'm almost ready with it...

However there is still 1 problem left, regarding the baseline-shift... Is that
not supported in FF? How should I convert that? See eample below. This works
fine in IE, but in FF both texts use the same line...

Charles.

---
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="310 310 620 422"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[ text{font-family: Arial;}]]>
</style>
<text id="tid1">This is shown in a curve</text>
<text id="tid2">Shown in same curve</text>
<path id="pid" d="M558.256, 642.497 A65.7145, 65.7145 1 0 1 615.063, 554.471"/>
</defs>
<!-- show text using TREF
<text fill="black" style="baseline-shift:-14" font-size="9">
<textPath xlink:href="#pid"><tref xlink:href="#tid1"/></textPath>
</text>
<text fill="black" style="baseline-shift:-21" font-size="9">
<textPath xlink:href="#pid" startOffset="5%"><tref
xlink:href="#tid2"/></textPath>
</text>
-->
<!-- the above can be converted to: -->
<text fill="black" font-size="9">
<textPath xlink:href="#pid" baseline-shift="-14">This is shown in a
curve</textPath>
<textPath xlink:href="#pid" baseline-shift="-21" startOffset="5%">Shown in same
curve</textPath>
</text>
</svg>
---

Hi Charles,


> However there is still 1 problem left,
> regarding the baseline-shift...

I'm not sure about Firefox's specific status regarding baseline-shift support
(should be supported according to the documentation [1]), but A quick test using
a nightly build (3.6a2 [2]) seemed to confirm that it doesn't work, though. I'd
add that this is a feature not well supported among implementations as far as I
know.

Nevertheless, I'd say the underlying problem seems unrelated: to be using a
typeset-oriented feature to achieve a simpler problem: placing text in a
different line. For that, I'd suggest using the "tspan" element [3], which would
become something like:

   <textPath xlink:href="#pid" startOffset="5%">
     <tspan dy="1.1em">Shown in same curve</tspan>
   </textPath>

Using "em" units here will adjust to font size. :-)

Note that credits for this clever+simple idea go to Andreas Neumann (which has
already given this tip in this mailing list). ;-)


Hope this helps,
  Helder


[1] http://www.mozilla.org/projects/svg/status.html
[2] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a2pre)
Gecko/20090812 Minefield/3.6a2pre (.NET CLR 3.5.30729)
[3] http://www.w3.org/TR/SVG11/text.html#TSpanElement

Helder,

Thanks, that trick with "tspan dy" can be used.

See this page about baseline-shift not yet supported:
https://developer.mozilla.org/en/SVG_in_Firefox

Greetings,
Charles.





[Non-text portions of this message have been removed]

Apologies for cross-postings. Please send to interested colleagues and students

-- CALL FOR PAPERS - Deadline for submissions (2nd Call): 21 September 2009 --

IADIS INTERNATIONAL CONFERENCE APPLIED COMPUTING 2009

November 19-21, 2009 � ROME, ITALY
(http://www.computing-conf.org/)


* Keynote Speaker (confirmed):
Professor Ernesto Damiani, University of Milan, Italy

Professor Dinesh Kumar, Associate Professor of Biosignals at RMIT University,
Australia

* Conference background and goals
The IADIS Applied Computing 2009 conference aims to address the main issues of
concern within the applied computing area and related fields. This conference
covers essentially technical aspects. The applied computing field is divided
into more detailed areas (see below). However innovative contributes that don't
fit into these areas will also be considered since they might be of benefit to
conference attendees.

* Format of the Conference
The conference will comprise invited talks and oral presentations. The
proceedings of the conference will be published in the form of a book. The best
paper authors will be invited to publish extended versions of their papers in
specific journals, and in the IADIS International Journal on Computer Science
and Information Systems.

* Types of submissions
Full and Short Papers, Reflection Papers, Posters/Demonstrations, Tutorials,
Panels and Doctoral Consortium. All submissions are subject to a blind
refereeing process.

* Topics related to Applied Computing are of interest. These include, but are
not limited to the following areas:
- Agent Systems and Applications
- Algorithms
- Applied Information Systems
- Bioinformatics
- Case Studies and Applications
- Communications
- Data Mining
- Database Systems
- E-Commerce Theory and Practice
- Embedded Systems
- Evaluation and Assessment
- Global Tendencies
- Grid Computing
- Information Retrieval
- Intelligent Systems
- Mobile Networks and Systems
- Multimedia
- Networking
- Object Orientation
- Parallel and Distributed Systems
- Payment Systems
- Programming Languages
- Protocols and Standards
- Security
- Semantic Web
- Software Engineering
- Storage Issues
- Technologies for E-Learning
- Wireless Applications
- WWW Applications
- WWW Technologies
- Ubiquitous Computing
- Usability Issues
- Virtual Reality
- Visualization
- XML and other Extensible Languages

* Important Dates:
- Submission deadline (2nd Call): 21 September 2009
- Notification to Authors (2nd Call): 16 October 2009
- Final Camera-Ready Submission and Early Registration (2nd Call): Until 30
October 2009
- Late Registration (2nd Call): After 30 Octobe 2009
- Conference: Rome, Italy, 19 to 21 November 2009

* Secretariat
IADIS INTERNATIONAL CONFERENCE APPLIED COMPUTING 2009
Rua Sao Sebastiao da Pedreira, 100, 3, 1050-209 Lisbon, Portugal
E-mail: secretariat@... Web site: http://www.computing-conf.org/

* Program Committee

Program Chair
Hans Weghorn, BW Cooperative State University Stuttgart, Germany

Conference Chair
Pedro Isa�as, Universidade Aberta (Portuguese Open University), Portugal

Committee Members:
for the full Committee Members list please access
http://www.computing-conf.org/committees.asp

* Co-located events
Please also check the co-located events WWW/Internet 2009
(http://www.internet-conf.org/) - 19-22 November 2009 and CELDA 2009
(http://www.celda-conf.org/) - 20-22 November 2009

* Registered participants in the Applied Computing conference may attend the
WWW/Internet and CELDA conferences' sessions free of charge.