> I'm particularly interested in examples that are easy to demo, but which
> demonstrate some nice interactivity with server-side data. I used to use the
> Crime and Poverty example from carto.net but it seems to have stopped
> working for me recently.

Not sure exactly how much interactivity with server-side data you're looking
for, but the following SVG demos are all data driven graphics.

You'll porbably already have this on your list but for sake of completeness I'll
start with Mike Bostock's d3.js slide deck of SVGopen 2011

the complete slide deck
http://mbostock.github.com/d3/talk/20111018/#0

the showreel
http://mbostock.github.com/d3/talk/20111018/#17

the calendar view of flight data
http://mbostock.github.com/d3/talk/20111018/#10


From the Federal Statistical Office of Germany there is

Animated population pyramid (localized: en/fr/ru/de)
http://www.destatis.de/bevoelkerungspyramide/
(for demos see http://vimeo.com/visuell)

Voronoi diagram of inflation (price trends and weights of various product
groups)
http://www.destatis.de/Voronoi/PriceKaleidoscope.svg


From Office for National Statistics (England and Wales)

Commuter journeys around London (a little slow in Firefox, best in Chrome)
http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc15/london2.svg


from my own work

Elevation diagram for Google Maps
http://vis.uell.net/elevation/

Mapping of election results
http://vis.uell.net/gsvg/electionAtlasGermany.html
http://vis.uell.net/sh/12/atlas.html


Math functions visualized using Google Search
(Firefox or Webkit, not Opera)
http://www.google.de/search?q=sin(x)

Depending on your audience it might also be interesting to show that Google
routing is visualized using SVG. Requires to use a Webinspector/Firebug or
similar to explain.

Michael

Hi folks!

Some years ago I developed an Windows application using Delphi and I used a web
browser component on my form. In this, I was showing HTML pages with SVG
embedded in it. It allowed me to show static maps, with hovering, zooming and
panning enabled as well as clicking. I added some javascript to make this
possible. Users were supposed to download the Adobe SVG viewer to get this to
work.

I'm still maintaining the application. Unfortunately, Adobe has dropped support
for their viewer in the mean time. It is apparently not even compatible anymore
with Windows 7. For that reason, my project manager does not want to use the
above solution anymore. Does anyone have a suggestion what I could use to
replace the web browser and the Adobe SVG viewer? TIA

Kind regards,
Dobedani

Hi,



Web support for SVG can be found in modern versions of Chrome, Safari,
Opera, Firefox and IE. For the latter you'll need IE9 or above. For IE<9 the
Adobe viewer still works; Adobe is no longer developing the plugin, but it
still works and as of a month or so ago I checked and you can still download
it from their SVG Zone.



In moving an old application from ASV (what the Adobe plugin is usually
called) to more modern implementations, you may have to rewrite some of the
code. Jonathan Watt's http://jwatt.org/svg/authoring/ gives the necessary
information to do so.



Hope this helps

David



From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
On Behalf Of Dobedani
Sent: Thursday, January 19, 2012 7:16 AM



Hi folks!

Some years ago I developed an Windows application using Delphi and I used a
web browser component on my form. In this, I was showing HTML pages with SVG
embedded in it. It allowed me to show static maps, with hovering, zooming
and panning enabled as well as clicking. I added some javascript to make
this possible. Users were supposed to download the Adobe SVG viewer to get
this to work.

I'm still maintaining the application. Unfortunately, Adobe has dropped
support for their viewer in the mean time. It is apparently not even
compatible anymore with Windows 7. For that reason, my project manager does
not want to use the above solution anymore. Does anyone have a suggestion
what I could use to replace the web browser and the Adobe SVG viewer? TIA

Kind regards,
Dobedani



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

Hi,



You also might think about using WebKit instead of IE webrowser control.



Regards,

Chris



From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
On Behalf Of David Dailey
Sent: Donnerstag, 19. Januar 2012 13:31
To: svg-developers@yahoogroups.com
Subject: RE: [svg-developers] Support for Adobe SVG viewer dropped





Hi,

Web support for SVG can be found in modern versions of Chrome, Safari,
Opera, Firefox and IE. For the latter you'll need IE9 or above. For IE<9 the
Adobe viewer still works; Adobe is no longer developing the plugin, but it
still works and as of a month or so ago I checked and you can still download
it from their SVG Zone.

In moving an old application from ASV (what the Adobe plugin is usually
called) to more modern implementations, you may have to rewrite some of the
code. Jonathan Watt's http://jwatt.org/svg/authoring/ gives the necessary
information to do so.

Hope this helps

David

From: svg-developers@yahoogroups.com
<mailto:svg-developers%40yahoogroups.com>
[mailto:svg-developers@yahoogroups.com
<mailto:svg-developers%40yahoogroups.com> ]
On Behalf Of Dobedani
Sent: Thursday, January 19, 2012 7:16 AM

Hi folks!

Some years ago I developed an Windows application using Delphi and I used a
web browser component on my form. In this, I was showing HTML pages with SVG
embedded in it. It allowed me to show static maps, with hovering, zooming
and panning enabled as well as clicking. I added some javascript to make
this possible. Users were supposed to download the Adobe SVG viewer to get
this to work.

I'm still maintaining the application. Unfortunately, Adobe has dropped
support for their viewer in the mean time. It is apparently not even
compatible anymore with Windows 7. For that reason, my project manager does
not want to use the above solution anymore. Does anyone have a suggestion
what I could use to replace the web browser and the Adobe SVG viewer? TIA

Kind regards,
Dobedani

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





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

The example at  http://srufaculty.sru.edu/david.dailey/svg/eggcloning3.svg
represents one of my first attempts (circa 2004) to create a non-trivial bit
of dynamic SVG.



It worked as I hoped and designed in IE/ASV. Later as newfangled
implementations of SVG came along like Opera and Firefox, I fixed the parts
that prevented it from being standards compliant, and eventually, wearing
all the patience I could muster, it began to work in other browsers.. Sort
of.



Basically the user interface is patterned after the modal or context
sensitive interfaces pioneered in the pre-Apple GUI environment of the PLATO
system (Apple got more than a few things wrong, btw, but then so did Xerox -
I think they were in a hurry): clicking one place does one thing; somewhere
else does something else. All drawing programs should be like this, I
believe. Clicking and dragging is different than clicking.



Anyhow, the colors of the eggs in IE/ASV (you really should keep ASV current
on your machines somewhere since in 7.34 percent of cases it is the only
bug-less browser implementation of SVG and remains the only way you can
actually see things!) are rich in iron and show the influence of free-range
chickens. The Opera eggs, the Firefox eggs, the WebKit eggs and the
Microsoft eggs all look like the chickens were raised in cages with their
beaks clipped, fed steroids and stimulants to increase egg-laying and never
given a chance to stretch their legs. You know what? I think that is an ASV
bug with the way the filter influences the chroma. Okay, so maybe ASV wasn't
perfect! [I can adjust that, though, with a little bit of RNA, to make the
eggs look farm-raised - the average consumer palette will never know.]



However, notice the way the eggs slide over the gradients in ASV. Each egg
slithers up and down the gradient. In Opera, the first egg seems to
determine the movement of all the others (unless you kill the first egg, and
then the others seem to gain a bit of personality). The slithering just
isn't right! Is it me and ASV or is it Opera?



Firefox and Safari are no use as they don't try to deform the darn eggs at
all, and Chrome (true to its name) pretends each egg is the Starship
Enterprise and floats them about like Federation starcruisers in the game
"Empire" (also a Plato thing - I will have you know I was third-ranked in
the world at that game in the late 1970's!).



So the question does sort of matter - is the deformation we see in Opera or
in ASV correct here? A simpler case may be seen at

http://srufaculty.sru.edu/david.dailey/svg/svgopen2008/bouncing3.svg



Note how Opera seems to deform the purple ball before it gets to the
gradient, almost the way Chrome does. (Safari is just goofy, and FF and IE
don't even try to play the game).



Cheers

David











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

... Ok but slow in FFX 8 (kubuntu)

Hi svg developpers,

i'm playing with bitmap, pattern, transform and cutting and i found some huge
rendering problem.

First, you can check your prefered navigator here :
http://www.visualkit.com/emao/bugsvg/fit_01.html

On the right side, a bitmap shows what is expected. Left side show what your
navigator renders.

Developping with firefox, when i finish writing my javascript, the rendering
became very slow (20 object!), so i decided to check it in opera, and i saw the
result : pattern is blured and cannot be recognize!

For chrome and opera, javascript cuttings (image with red triangles) shows
patterns not properly set in cuttings!  i guess safari is in the same way ...

Here is what i do in my svg

First i create a pattern based on an image with a png
I make 2 polygons to cut the image and show them.
I transform the polygons to see what happens.
Then i do the same thing with javascript, making more polygons.


begin -------->

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events" id="root" xml:space="preserve"
preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 300
500"  >

<script type="text/ecmascript">
<![CDATA[
svgDocument = document;
xmlns="http://www.w3.org/2000/svg";
// ]]>
</script>

<!-- horizontal line -->
<line x1="-300" y1="0" x2="300" y2="0" style="stroke: blue;" />
<!-- vertical line -->
<line x1="0" y1="-300" x2="0" y2="300" style="stroke: blue;" />

<script type="text/ecmascript">
<![CDATA[
function Divide_rect(x,y,width,height,nbl,nbh){
//alert(data1);
pasx=(width/nbl);
pasy=(height/nbh);
dest = svgDocument.getElementById("temp");
//alert(dest);
for (i=0;i<nbl;i++)
{
xrect=pasx*i;
for (j=0;j<nbh;j++)
{
yrect=pasy*j;
t1p1x=xrect;
t1p1y=yrect;
t1p2x=xrect+(pasx);
t1p2y=yrect+(pasy);
t1p3x=xrect;
t1p3y=yrect+(pasy);

t1id="fit_" + i +"_"+ j;
//t1points= t1p1x +","+ t1p1y+" "+t1p2x+","+t1p2y+" "+t1p3x+","+t1p3y;
t1points= "M" +t1p1x +","+ t1p1y+" L"+t1p2x+","+t1p2y+" L"+t1p3x+","+t1p3y +"
z";
//var t1 = svgDocument.createElementNS(xmlns,"polygon");
var t1 = svgDocument.createElementNS(xmlns,"path");
t1.setAttributeNS(null,"id", t1id);
//t1.setAttributeNS(null, "points", t1points);
t1.setAttributeNS(null, "d", t1points);
t1.setAttributeNS(null, "fill", "url(#pmire)" );
t1.setAttributeNS(null, "stroke", "black" );
dest.appendChild(t1);


t2p1x=xrect;
t2p1y=yrect;
t2p2x=xrect+(pasx);
t2p2y=yrect;
t2p3x=xrect+(pasx);
t2p3y=yrect+(pasy);
t2id="fit_" + i +"_"+ j;
//t2points= t2p1x +","+ t2p1y+" "+t2p2x+","+t2p2y+" "+t2p3x+","+t2p3y;
t2points= "M" +t2p1x +","+ t2p1y+" L"+t2p2x+","+t2p2y+" L"+t2p3x+","+t2p3y +"
z";
//var t2 = svgDocument.createElementNS(xmlns,"polygon");
var t2 = svgDocument.createElementNS(xmlns,"path");
t2.setAttribute("id", t1id);
//t2.setAttributeNS(null, "points", t2points);
t2.setAttributeNS(null, "d", t2points);
t2.setAttributeNS(null, "fill", "url(#pmire)" );
t2.setAttributeNS(null, "stroke", "red" );
dest.appendChild(t2);
}
}

} //Divide_rect
// ]]>
</script>

<defs>
<pattern id="pmire" x="0" y="0" width="100" height="100"
patternUnits="objectBoundingBox">
<image id="mire" x="0" y="0" width="100" height="100" xlink:href="./mire.png" />
</pattern>
<polygon id="t1" points="0,0 0,100 100,100" fill="url(#pmire)"
transform="translate(0,0) skewX(0)"/>
<polygon id="t2" points="0,0 100,100 100,0" fill="url(#pmire)"
transform="translate(0,0) skewX(0)"/>
<g id="temp" >
</g>
</defs>

<use xlink:href="#t1" x="10" y="40"  transform="matrix(1,0.10,0.5,1,0,0)"/>
<use xlink:href="#t2" x="10" y="40"  transform="matrix(0.5,0.09,0.99,1,-15,0)"
/>
<use xlink:href="#mire" x="10" y="150"  />
<use xlink:href="#t1" x="150" y="150"  />
<use xlink:href="#t2" x="150" y="150"  />
<use xlink:href="#temp" x="10" y="300"  />
<script type="text/ecmascript">
<![CDATA[
var d = document.getElementById("mire");
var x=d.getAttributeNS(null,"x");
var y=d.getAttributeNS(null,"y");
var width=d.getAttributeNS(null,"width");
var height=d.getAttributeNS(null,"height");
var nbl=2;
var nbh=2;
Divide_rect(10,10,width,height,nbl,nbh)
// ]]>
</script>

</svg>

<---------end

if you want mire.png go here :
http://labo.visualkit.com/sites/labo.visualkit.com/files/mire.png

but it is embeded in the test svg file.

Did i made something wrong?

What result do you have in your navigator?

Cheers
philippe

Some friends and I have had this discussion of late: is script (involving
lots of DOM manipulation) or CSS (involving script) for efficient in terms
of browser implementation.



I can imagine thought experiments to resolve the issue, but the results
would only prove things in certain dreams (albeit good ones).



Does anyone know of any systematic studies that pit DOM against CSS when it
comes to browser performance?



What would things be like in the mobile world? The last time (2008) that  I
studied mobile performance with SVG -DOM
(http://srufaculty.sru.edu/david.dailey/Benchmarks.htm ), the i-phone didn't
do so well, but I suspect that things may have changed in the post
ASV-world, and, of course, CSS support for SVG was even more fledgling then
than now that the CSS-ers have decided to annex SVG (with no response from
the League of Nations).



Cheers

David



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

On Sat, 21 Jan 2012 19:19:36 +0100, philsvg <philsvg@...> wrote:

>  ... Ok but slow in FFX 8 (kubuntu)
>
> Hi svg developpers,
>
> i'm playing with bitmap, pattern, transform and cutting and i found some
> huge rendering problem.
>
> First, you can check your prefered navigator here :
> http://www.visualkit.com/emao/bugsvg/fit_01.html

Ok, so you use patternUnits="objectBoundingBox" and width and height="100"
on the <pattern> element. That means that you just expressed "I want my
pattern tile to be 100 times the size of the boundingbox of the element
that uses the pattern". If on the other hand you were to use
patternUnits="userSpaceOnUse", it would be "I want my pattern tile to be
100x100 user units", which in your example is what you seem to want.

You could also keep patternUnits="objectBoundingBox" and change the
pattern width and height to be "1" instead of "100", that makes the
pattern tile be the same size as the boundingbox of the element that uses
the pattern. In this case you may also want to add a viewBox attribute on
the pattern element to specify the coordinate system inside the pattern
(in your case probably viewBox="0 0 100 100").

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

Thank You Erik,

You're right in your assumption : I want my pattern tile to be  100x100 user
units (and its origin to 0,0 and use this position to cut the pattern where i
want).

I replace patternUnits="objectBoundingBox" by patternUnits="userSpaceOnUse", and
it solves overload in FFX and rendering in Opera and Chrome.

And your explanation is the simplest and clearest one i have ever read about
patternUnits. Thank you again for this lesson.

I tested with patternUnits="objectBoundingBox" and width="1" and the rendering
is ok too. If i increase width (and duplicate the pattern in memory) i can see
bluring increase too (opera only)...

I tested with patternUnits="objectBoundingBox" and width="1" and no viewBox with
firefox, and i have the same cutting with Opera ... but chrome shrink the mire
in the bouncing rectangle of the cut.

But if i use patternUnits="objectBoundingBox" and width="2", it renders in FFX
as if patternUnits="userSpaceOnUse" that seems logical, but rendering is
different for opera who cuts like width="1" and for chrome who cuts in a
different way. try it!

With FFX, if i use width="1" height="1" patternUnits="objectBoundingBox"
viewBox="0,0,100,100", tiling disappear but it is rendered in Opera and chrome
...


Thanks for this help
Philippe

--- In svg-developers@yahoogroups.com, "Erik Dahlstrom" <ed@...> wrote:
>
> On Sat, 21 Jan 2012 19:19:36 +0100, philsvg <philsvg@...> wrote:
>
> >  ... Ok but slow in FFX 8 (kubuntu)
> >
> > Hi svg developpers,
> >
> > i'm playing with bitmap, pattern, transform and cutting and i found some
> > huge rendering problem.
> >
> > First, you can check your prefered navigator here :
> > http://www.visualkit.com/emao/bugsvg/fit_01.html
>
> Ok, so you use patternUnits="objectBoundingBox" and width and height="100"
> on the <pattern> element. That means that you just expressed "I want my
> pattern tile to be 100 times the size of the boundingbox of the element
> that uses the pattern". If on the other hand you were to use
> patternUnits="userSpaceOnUse", it would be "I want my pattern tile to be
> 100x100 user units", which in your example is what you seem to want.
>
> You could also keep patternUnits="objectBoundingBox" and change the
> pattern width and height to be "1" instead of "100", that makes the
> pattern tile be the same size as the boundingbox of the element that uses
> the pattern. In this case you may also want to add a viewBox attribute on
> the pattern element to specify the coordinate system inside the pattern
> (in your case probably viewBox="0 0 100 100").
>
> Hope this helps
> --
> Erik Dahlstrom, Core Technology Developer, Opera Software
> Co-Chair, W3C SVG Working Group
> Personal blog: http://my.opera.com/macdev_ed
>

On Mon, 23 Jan 2012 20:02:50 +0100, philsvg <philsvg@...> wrote:
...
> I tested with patternUnits="objectBoundingBox" and width="1" and the
> rendering is ok too. If i increase width (and duplicate the pattern in
> memory) i can see bluring increase too (opera only)...

Please provide an example.

> I tested with patternUnits="objectBoundingBox" and width="1" and no
> viewBox with firefox, and i have the same cutting with Opera ... but
> chrome shrink the mire in the bouncing rectangle of the cut.

I think I tried this and it looked the same in Chromium to me, again it's
probably best if you provide an example.

> But if i use patternUnits="objectBoundingBox" and width="2", it renders
> in FFX as if patternUnits="userSpaceOnUse" that seems logical, but
> rendering is different for opera who cuts like width="1" and for chrome
> who cuts in a different way. try it!

Opera 11.61 and Chromium 18.0.997.0 both cut it the same way for me.

> With FFX, if i use width="1" height="1" patternUnits="objectBoundingBox"
> viewBox="0,0,100,100", tiling disappear but it is rendered in Opera and
> chrome ...

I don't think Firefox allows commas in viewBox attributes, try separating
the values with space instead. If I make that change it still seems like a
bug in Firefox that it doesn't respect the pattern coordinate system (the
viewBox).

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

>
> I don't think Firefox allows commas in viewBox attributes, try separating
> the values with space instead. If I make that change it still seems like a
> bug in Firefox that it doesn't respect the pattern coordinate system (the
> viewBox).

Commas are allowed. It's possible there is a coordiante system issue though.

Best regards

Robert.

Hi!

I'm having trouble scaling a g-tag from center point. The item will grow
right/bottom, but I need to scale the element from its center point, growing in
all directions.

I'm using the animateTransform for scaling:
<animateTransform attributeName="transform" attributeType="XML" type="scale"
from="1" to="1.5" dur="3s" fill="freeze"/>

I've read scaling from center point is not supported in SVG, but I refuse to
believe this is true. Up to now I have compensated the bottom/right positioning
with an additional translate-animation, but this is nasty :/.

Anyone done this?

As often as I've seen this question in the past n years (for some n > k) I'd
have to resurrect the suggestion that scaling and rotation relative to the
center be added to the spec:

transform="scale(2, centroid)" or transform="rotate(90, BBCenter)" , or
something like it, just oughta make sense.



In the meantime, see
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#multiple  for the
basics and

http://srufaculty.sru.edu/david.dailey/svg/newstuff/transformRotate1.svg
for doing it with animateTransform.



additive="sum" is the magical key that unlocks the door!



I hope this helps



Cheers

David





From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
On Behalf Of gjella
Sent: Tuesday, January 24, 2012 7:17 AM
To: svg-developers@yahoogroups.com
Subject: [svg-developers] Scaling from center point of element





Hi!

I'm having trouble scaling a g-tag from center point. The item will grow
right/bottom, but I need to scale the element from its center point, growing
in all directions.

I'm using the animateTransform for scaling:
<animateTransform attributeName="transform" attributeType="XML" type="scale"
from="1" to="1.5" dur="3s" fill="freeze"/>

I've read scaling from center point is not supported in SVG, but I refuse to
believe this is true. Up to now I have compensated the bottom/right
positioning with an additional translate-animation, but this is nasty :/.

Anyone done this?





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

David Dailey:
> As often as I've seen this question in the past n years (for some n > k) I'd
> have to resurrect the suggestion that scaling and rotation relative to the
> center be added to the spec:
>
> transform="scale(2, centroid)" or transform="rotate(90, BBCenter)" , or
> something like it, just oughta make sense.

Yep, and the plan to enable this is for SVG2 to follow the combined
SVG/CSS Transforms spec, where transform will become a property (instead
of an attribute) and the transform-origin property will also be
available.  So in the future you'll be able to do:

    <g transform="scale(2)" transform-origin="50% 50%">

Oh good! The center of mass (centroid or first central moment) is also a
graphically relevant construct, so we should think about that too! It’s easily
scriptable for integrable curves (well, heck, I suppose they don’t even need
to be integrable* do they?) but declarative access to the centroid would be good
for realistic rotation (even sans gravity).



Cheers

David



*since they can be drawn with finitely many pixels.



From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com] On
Behalf Of Cameron McCormack
Sent: Tuesday, January 24, 2012 9:20 PM
To: svg-developers@yahoogroups.com
Cc: David Dailey
Subject: Re: [svg-developers] Scaling from center point of element





David Dailey:
> As often as I've seen this question in the past n years (for some n > k) I'd
> have to resurrect the suggestion that scaling and rotation relative to the
> center be added to the spec:
>
> transform="scale(2, centroid)" or transform="rotate(90, BBCenter)" , or
> something like it, just oughta make sense.

Yep, and the plan to enable this is for SVG2 to follow the combined
SVG/CSS Transforms spec, where transform will become a property (instead
of an attribute) and the transform-origin property will also be
available. So in the future you'll be able to do:

<g transform="scale(2)" transform-origin="50% 50%">





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

David Dailey:
> Oh good! The center of mass (centroid or first central moment) is also a
> graphically relevant construct, so we should think about that too! It’s
> easily scriptable for integrable curves (well, heck, I suppose they
> don’t even need to be integrable* do they?) but declarative access to
> the centroid would be good for realistic rotation (even sans gravity).

Yeah, I should've said that the percentages in transform-origin will be
the bounding box of the object.  (There is still the issue of *which*
bounding box to use -- the geometry one that getBBox() provides, one
that include the stroke, markers, etc...)  Centroids may also be useful,
but supporting bounding boxes is a good simple first step.

--- In svg-developers@yahoogroups.com, Cameron McCormack <cam@...> wrote:
>
> David Dailey:
> > Oh good! The center of mass (centroid or first central moment) is also a
> > graphically relevant construct, so we should think about that too! It’s
> > easily scriptable for integrable curves (well, heck, I suppose they
> > don’t even need to be integrable* do they?) but declarative access to
> > the centroid would be good for realistic rotation (even sans gravity).
>
> Yeah, I should've said that the percentages in transform-origin will be
> the bounding box of the object.  (There is still the issue of *which*
> bounding box to use -- the geometry one that getBBox() provides, one
> that include the stroke, markers, etc...)  Centroids may also be useful,
> but supporting bounding boxes is a good simple first step.
>

Another problem I see is that during the animation the center of the bounding
box may constantly be shifting.

http://wwwpub.zih.tu-dresden.de/~s9783698/svg/bbRotate.svg


<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
onload="init()">
   <script type="text/ecmascript">
     var polygon
     var polygonContainer
     var bboxCenterMarker

     var angle = 0
     var angleIncrement = 5
     var interval = 50

     function init() {
       polygonContainer = document.getElementById('polygonContainer')
       polygon = polygonContainer.getElementsByTagName('polygon')[0]
       bboxCenterMarker = document.getElementById('bboxCenterMarker')
       animate()
     }

     function animate() {
       polygon.setAttribute('transform','rotate('+angle+')')
       angle += angleIncrement
       var bbox = polygonContainer.getBBox()
       bboxCenterMarker.setAttribute('cx',bbox.x + .5 * bbox.width)
       bboxCenterMarker.setAttribute('cy',bbox.y + .5 * bbox.height)
       window.setTimeout('animate()',interval)
     }
   </script>
   <g transform="translate(100,100)" id="polygonContainer">
     <polygon points="-50,-20 50,-20 -30,20, -50,20" stroke="black" fill="none"/>
     <circle r="2" fill="green"/>
     <circle r="2" stroke="red" fill="none" id="bboxCenterMarker"/>
   </g>
   <text x="10" y="200">Green circle: Rotation center (initial bounding box
center)</text>
   <text x="10" y="220">Red circle: Momentary bounding box center</text>
</svg>

--- In svg-developers@yahoogroups.com, "th_w@..." <th_w@...> wrote:
>
> --- In svg-developers@yahoogroups.com, Cameron McCormack <cam@> wrote:
> >
> > David Dailey:
> > > Oh good! The center of mass (centroid or first central moment) is also a
> > > graphically relevant construct, so we should think about that too! It’s
> > > easily scriptable for integrable curves (well, heck, I suppose they
> > > don’t even need to be integrable* do they?) but declarative access to
> > > the centroid would be good for realistic rotation (even sans gravity).
> >
> > Yeah, I should've said that the percentages in transform-origin will be
> > the bounding box of the object.  (There is still the issue of *which*
> > bounding box to use -- the geometry one that getBBox() provides, one
> > that include the stroke, markers, etc...)  Centroids may also be useful,
> > but supporting bounding boxes is a good simple first step.
> >
>
> Another problem I see is that during the animation the center of the bounding
box may constantly be shifting.
>
> http://wwwpub.zih.tu-dresden.de/~s9783698/svg/bbRotate.svg
>
>
> <?xml version="1.0" encoding="UTF-8"?>
> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
onload="init()">
>   <script type="text/ecmascript">
>     var polygon
>     var polygonContainer
>     var bboxCenterMarker
>
>     var angle = 0
>     var angleIncrement = 5
>     var interval = 50
>
>     function init() {
>       polygonContainer = document.getElementById('polygonContainer')
>       polygon = polygonContainer.getElementsByTagName('polygon')[0]
>       bboxCenterMarker = document.getElementById('bboxCenterMarker')
>       animate()
>     }
>
>     function animate() {
>       polygon.setAttribute('transform','rotate('+angle+')')
>       angle += angleIncrement
>       var bbox = polygonContainer.getBBox()
>       bboxCenterMarker.setAttribute('cx',bbox.x + .5 * bbox.width)
>       bboxCenterMarker.setAttribute('cy',bbox.y + .5 * bbox.height)
>       window.setTimeout('animate()',interval)
>     }
>   </script>
>   <g transform="translate(100,100)" id="polygonContainer">
>     <polygon points="-50,-20 50,-20 -30,20, -50,20" stroke="black"
fill="none"/>
>     <circle r="2" fill="green"/>
>     <circle r="2" stroke="red" fill="none" id="bboxCenterMarker"/>
>   </g>
>   <text x="10" y="200">Green circle: Rotation center (initial bounding box
center)</text>
>   <text x="10" y="220">Red circle: Momentary bounding box center</text>
> </svg>
>

Sorry, there must be something wrong here.  In Firefox, the red circle is
shifting around as I expected, but not in Opera and Chromium.

Hi all,

I've got some SVG files that contain mousemove event listeners to invoke a
script to display a tooltip. If I try to add multiple SVG's to an HTML5 doc,
only the last page shows the tooltips when I run in most browsers.  In IE9, I
get the tooltips across all the SVG's.  This is my sample HTML file containing
the script and 2 child SVG elements.  Any idea what I need to do to get each SVG
to display their unique tooltips?

Thanks!


<!DOCTYPE html >
<html>
<head>
<meta charset="windows-1252"/>
<meta name="generator" content="SAS 9.4"/>
<title>SVG Inlined in HTML5</title>

<script type="text/ecmascript">
    var SVGRoot = null;
    var viewBox = null;
    var TrueCoords = null;
    var singleTip = null;
    var singleBox = null;
    var singleText = null;
    var tiptspan = null;
    function Init(anchor) {
       SVGRoot = document.getElementById(anchor);
       TrueCoords = SVGRoot.createSVGPoint();

       singleTip = document.getElementById(anchor + '_singleTip');

       singleBox = document.getElementById(anchor + '_singlebox');

       singleText = document.getElementById(anchor + '_singleText');
       tiptspan = document.getElementById(anchor + '_tiptspan');

       SVGRoot.addEventListener('mousemove', ShowTooltip, false);
       SVGRoot.addEventListener('mouseout', HideTooltip, false);

       if (navigator.appName == 'Microsoft Internet Explorer') {
           if (singleText != null)
             singleText.setAttributeNS(null, 'class', 'ietiptext' );
       }
    }

function GetTrueCoords(evt)
{
    var p1    = SVGRoot.createSVGPoint();
    var p2;
    var m = SVGRoot.getScreenCTM();
    p1.x = evt.clientX;
    p1.y = evt.clientY;
    p2 = p1.matrixTransform(m.inverse());

    TrueCoords.x = Math.round(p2.x*100) / 100;
    TrueCoords.y = Math.round(p2.y*100) / 100;
}

function HideTooltip( evt )
{
    tiptspan.firstChild.nodeValue = null;
    singleTip.setAttributeNS(null, 'visibility', 'hidden');
}

function ShowTooltip( evt )
{
    GetTrueCoords( evt );
    var targetElement = evt.target;

  var targetTspan = targetElement.getElementsByTagName('desc').item(0);

    if ( targetTspan) {
       if (targetTspan.firstChild != null)
          tiptspan.firstChild.nodeValue = targetTspan.firstChild.nodeValue; }

    if ( '' != tiptspan.firstChild.nodeValue )
    {

       var outline = singleText.getBBox();

       singleTip.setAttributeNS(null, 'visibility', 'visible');

       xPos = TrueCoords.x;
       yPos = TrueCoords.y-20;

       singleBox.setAttributeNS(null, 'height', outline.height + 10);
       singleTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' +
yPos + ')');
    }
}
</script>


<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
  width="801" height="601"
xml:space="preserve" baseProfile="full" version="1.1" id="SVGMain1"
onload='Init("SVGMain1")' >
<desc></desc>
<defs>
<clipPath id="SVGMain_clipPage1">
<rect x="-1" y="-1" width="801" height="601"/>
</clipPath>
</defs>
<g id="SVGMain1_Page1">
<rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; fill-opacity:
0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0;
stroke-linejoin: round; "/>
<rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke:
#FFFFFF; stroke-width: 1; stroke-linejoin: round; "/>
<path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; stroke-width:
1; fill: none; stroke-linejoin: round; "/>
<text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif;
font-size: 19px; font-weight: bold; ">SVG1</text>
<rect id='rect1' x="0" y="0" width="800" height="600" fill="#FFFFFF"
fill-opacity="0">
<desc>Graphics text slide 1</desc>
</rect>
</g>
<g id="SVGMain1_singleTip" visibility="hidden" pointer-events="none">
    <rect id="SVGMain1_singlebox" x="0" y="0" width="88" height="20" rx="2"
ry="2" fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/>
    <text id="SVGMain1_singleText" x="5" y="10" font-family="'Arial', sans-serif"
font-size="8" class="tiptext">
       <tspan id="SVGMain1_tiptspan" x="5"><![CDATA[ ]]></tspan>
    </text>
</g>
<defs>
<style type="text/css"><![CDATA[
     text { white-space: pre }
     text.ietiptext { white-space: normal }
     text.tiptext { white-space: pre }
]]></style>
</defs>

</svg>


<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
  width="801" height="601" xml:space="preserve" baseProfile="full" version="1.1"
id="SVGMain2" onload='Init("SVGMain2")' viewBox="-1 -1 801 601">
<desc></desc>
<defs>
<clipPath id="SVGMain2_clipPage1">
<rect x="-1" y="-1" width="801" height="601"/>
</clipPath>
</defs>
<g id="SVGMain2_Page1">
<rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; fill-opacity:
0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0;
stroke-linejoin: round; "/>
<rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke:
#FFFFFF; stroke-width: 1; stroke-linejoin: round; "/>
<path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; stroke-width:
1; fill: none; stroke-linejoin: round; "/>
<text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif;
font-size: 19px; font-weight: bold; ">SVG2</text>
<rect id='rect2' x="0" y="0" width="800" height="600" fill="#FFFFFF"
fill-opacity="0">
<desc>Graphics text slide 2</desc>
</rect>
</g>
<g id="SVGMain2_singleTip" visibility="hidden" pointer-events="none">
    <rect id="SVGMain2_singlebox" x="0" y="0" width="88" height="20" rx="2"
ry="2" fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/>
    <text id="SVGMain2_singleText" x="5" y="10" font-family="'Arial', sans-serif"
font-size="8" class="tiptext">
       <tspan id="SVGMain2_tiptspan" x="5"><![CDATA[ ]]></tspan>
    </text>
</g>

</svg>

</body>
</html>

Hello Erik,

here are my examples :
http://www.visualkit.com/emao/bugsvg/fit_svg_html.php

You have a combo with different cases. Choose one of them and clic Display!
button.
This will display a textarea with the line used to generate the pattern in the
embed svg, on the right of your screen. On left side, a bitmap showing what i
want.

using the combo, you'll find different cases :

1 - chromium and opera srink pattern : perhaps this case is normal but as ffx
not render pattern with viewbox when objectBoundingBox is selected ...

2- firefox: objectBoundingBox + viewbox -coma or space in pattern : this case
uses viewbox, and ffx not render pattern. i tested with space and coma, same
result.

3 - opera : objectBoundingBox + width > 35 = blur : this case shows blured
pattern when width=45. I can see it when width is around 30 ... and in
http://www.visualkit.com/emao/bugsvg/fit_01.html where it is at 100 ...

4 - normal case with ffx not opera and chrome : This case is the normal case, as
i have the same behavior with objectBoundingBox and userSpaceOnUse. Bad news,
opera and chrome cut in different way, the same as "similar for all".

5 - similar for all : this case shows a rendering identical for ffx, opera and
chromium.

I use both of them under kubuntu 11.10 with asus x71sl with nvidia card. I
didn't test them under windows.

Using userSpaceOnUse instead of objectBoundingBox give me what i want. It is the
first time i use userSpaceOnUse ... and perhaps the last time ... until i have a
real need for it.

Hope this helps
Philippe
http://www.visualkit.com

--- In svg-developers@yahoogroups.com, "Erik Dahlstrom" <ed@...> wrote:
>
> On Mon, 23 Jan 2012 20:02:50 +0100, philsvg <philsvg@...> wrote:
> ...
> > I tested with patternUnits="objectBoundingBox" and width="1" and the
> > rendering is ok too. If i increase width (and duplicate the pattern in
> > memory) i can see bluring increase too (opera only)...
>
> Please provide an example.
>
> > I tested with patternUnits="objectBoundingBox" and width="1" and no
> > viewBox with firefox, and i have the same cutting with Opera ... but
> > chrome shrink the mire in the bouncing rectangle of the cut.
>
> I think I tried this and it looked the same in Chromium to me, again it's
> probably best if you provide an example.
>
> > But if i use patternUnits="objectBoundingBox" and width="2", it renders
> > in FFX as if patternUnits="userSpaceOnUse" that seems logical, but
> > rendering is different for opera who cuts like width="1" and for chrome
> > who cuts in a different way. try it!
>
> Opera 11.61 and Chromium 18.0.997.0 both cut it the same way for me.
>
> > With FFX, if i use width="1" height="1" patternUnits="objectBoundingBox"
> > viewBox="0,0,100,100", tiling disappear but it is rendered in Opera and
> > chrome ...
>
> I don't think Firefox allows commas in viewBox attributes, try separating
> the values with space instead. If I make that change it still seems like a
> bug in Firefox that it doesn't respect the pattern coordinate system (the
> viewBox).
>
> Cheers
> --
> 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, "th_w@..." <th_w@...> wrote:
>
> --- In svg-developers@yahoogroups.com, "th_w@" <th_w@> wrote:
> >
> > --- In svg-developers@yahoogroups.com, Cameron McCormack <cam@> wrote:
> > >
> > > David Dailey:
> > > > Oh good! The center of mass (centroid or first central moment) is also a
> > > > graphically relevant construct, so we should think about that too!
It’s
> > > > easily scriptable for integrable curves (well, heck, I suppose they
> > > > don’t even need to be integrable* do they?) but declarative access to
> > > > the centroid would be good for realistic rotation (even sans gravity).
> > >
> > > Yeah, I should've said that the percentages in transform-origin will be
> > > the bounding box of the object.  (There is still the issue of *which*
> > > bounding box to use -- the geometry one that getBBox() provides, one
> > > that include the stroke, markers, etc...)  Centroids may also be useful,
> > > but supporting bounding boxes is a good simple first step.
> > >
> >
> > Another problem I see is that during the animation the center of the
bounding box may constantly be shifting.
> >
> > http://wwwpub.zih.tu-dresden.de/~s9783698/svg/bbRotate.svg
> >
> >
> > <?xml version="1.0" encoding="UTF-8"?>
> > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
onload="init()">
> >   <script type="text/ecmascript">
> >     var polygon
> >     var polygonContainer
> >     var bboxCenterMarker
> >
> >     var angle = 0
> >     var angleIncrement = 5
> >     var interval = 50
> >
> >     function init() {
> >       polygonContainer = document.getElementById('polygonContainer')
> >       polygon = polygonContainer.getElementsByTagName('polygon')[0]
> >       bboxCenterMarker = document.getElementById('bboxCenterMarker')
> >       animate()
> >     }
> >
> >     function animate() {
> >       polygon.setAttribute('transform','rotate('+angle+')')
> >       angle += angleIncrement
> >       var bbox = polygonContainer.getBBox()
> >       bboxCenterMarker.setAttribute('cx',bbox.x + .5 * bbox.width)
> >       bboxCenterMarker.setAttribute('cy',bbox.y + .5 * bbox.height)
> >       window.setTimeout('animate()',interval)
> >     }
> >   </script>
> >   <g transform="translate(100,100)" id="polygonContainer">
> >     <polygon points="-50,-20 50,-20 -30,20, -50,20" stroke="black"
fill="none"/>
> >     <circle r="2" fill="green"/>
> >     <circle r="2" stroke="red" fill="none" id="bboxCenterMarker"/>
> >   </g>
> >   <text x="10" y="200">Green circle: Rotation center (initial bounding box
center)</text>
> >   <text x="10" y="220">Red circle: Momentary bounding box center</text>
> > </svg>
> >
>
> Sorry, there must be something wrong here.  In Firefox, the red circle is
shifting around as I expected, but not in Opera and Chromium.
>

It looks like a bug in Firefox IMHO. The transformation shouldn't influence the
objectBoundingBox of the element. Thats why both circles stay at the same point
during the animation on Opera and WebKit.

I didn't see that you take the bounding box of the grouping element at the
beginning :P

But you are rotating around the central point of the shape, that's why both
circles stay as they are. The circle would be shifting if the center point of
the shape is not exactly on the zero coordinate of its userspace.

That it shifts on FF seems to be a bug in FF for polygon elements. You should
report it at bugs.mozilla.org.

Dirk

--- In svg-developers@yahoogroups.com, "th_w@..." <th_w@...> wrote:
>
> --- In svg-developers@yahoogroups.com, "th_w@" <th_w@> wrote:
> >
> > --- In svg-developers@yahoogroups.com, Cameron McCormack <cam@> wrote:
> > >
> > > David Dailey:
> > > > Oh good! The center of mass (centroid or first central moment) is also a
> > > > graphically relevant construct, so we should think about that too!
It’s
> > > > easily scriptable for integrable curves (well, heck, I suppose they
> > > > don’t even need to be integrable* do they?) but declarative access to
> > > > the centroid would be good for realistic rotation (even sans gravity).
> > >
> > > Yeah, I should've said that the percentages in transform-origin will be
> > > the bounding box of the object.  (There is still the issue of *which*
> > > bounding box to use -- the geometry one that getBBox() provides, one
> > > that include the stroke, markers, etc...)  Centroids may also be useful,
> > > but supporting bounding boxes is a good simple first step.
> > >
> >
> > Another problem I see is that during the animation the center of the
bounding box may constantly be shifting.
> >
> > http://wwwpub.zih.tu-dresden.de/~s9783698/svg/bbRotate.svg
> >
> >
> > <?xml version="1.0" encoding="UTF-8"?>
> > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
onload="init()">
> >   <script type="text/ecmascript">
> >     var polygon
> >     var polygonContainer
> >     var bboxCenterMarker
> >
> >     var angle = 0
> >     var angleIncrement = 5
> >     var interval = 50
> >
> >     function init() {
> >       polygonContainer = document.getElementById('polygonContainer')
> >       polygon = polygonContainer.getElementsByTagName('polygon')[0]
> >       bboxCenterMarker = document.getElementById('bboxCenterMarker')
> >       animate()
> >     }
> >
> >     function animate() {
> >       polygon.setAttribute('transform','rotate('+angle+')')
> >       angle += angleIncrement
> >       var bbox = polygonContainer.getBBox()
> >       bboxCenterMarker.setAttribute('cx',bbox.x + .5 * bbox.width)
> >       bboxCenterMarker.setAttribute('cy',bbox.y + .5 * bbox.height)
> >       window.setTimeout('animate()',interval)
> >     }
> >   </script>
> >   <g transform="translate(100,100)" id="polygonContainer">
> >     <polygon points="-50,-20 50,-20 -30,20, -50,20" stroke="black"
fill="none"/>
> >     <circle r="2" fill="green"/>
> >     <circle r="2" stroke="red" fill="none" id="bboxCenterMarker"/>
> >   </g>
> >   <text x="10" y="200">Green circle: Rotation center (initial bounding box
center)</text>
> >   <text x="10" y="220">Red circle: Momentary bounding box center</text>
> > </svg>
> >
>
> Sorry, there must be something wrong here.  In Firefox, the red circle is
shifting around as I expected, but not in Opera and Chromium.
>

One of the advantages of the centroid over the center of the bounding box (just
a guess) is that the centroid doesn’t change under rotation about a fixed
point while the latter does.



But, I agree with Cameron that allowing authors to declaratively access the
center of the bounding box is a positive step.



Cheers

David



Dirk wrote:







I didn't see that you take the bounding box of the grouping element at the
beginning :P

But you are rotating around the central point of the shape, that's why both
circles stay as they are. The circle would be shifting if the center point of
the shape is not exactly on the zero coordinate of its userspace.

That it shifts on FF seems to be a bug in FF for polygon elements. You should
report it at bugs.mozilla.org.

Dirk

--- In svg-developers@yahoogroups.com <mailto:svg-developers%40yahoogroups.com>
, "th_w@..." <th_w@...> wrote:
>
> --- In svg-developers@yahoogroups.com
<mailto:svg-developers%40yahoogroups.com> , "th_w@" <th_w@> wrote:
> >
> > --- In svg-developers@yahoogroups.com
<mailto:svg-developers%40yahoogroups.com> , Cameron McCormack <cam@> wrote:
> > >
> > > David Dailey:
> > > > Oh good! The center of mass (centroid or first central moment) is also a
> > > > graphically relevant construct, so we should think about that too!
It’s
> > > > easily scriptable for integrable curves (well, heck, I suppose they
> > > > don’t even need to be integrable* do they?) but declarative
access to
> > > > the centroid would be good for realistic rotation (even sans gravity).
> > >
> > > Yeah, I should've said that the percentages in transform-origin will be
> > > the bounding box of the object. (There is still the issue of *which*
> > > bounding box to use -- the geometry one that getBBox() provides, one
> > > that include the stroke, markers, etc...) Centroids may also be useful,
> > > but supporting bounding boxes is a good simple first step.
> > >
> >
> > Another problem I see is that during the animation the center of the
bounding box may constantly be shifting.
> >
> > http://wwwpub.zih.tu-dresden.de/~s9783698/svg/bbRotate.svg
> >
> >
> > <?xml version="1.0" encoding="UTF-8"?>
> > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
onload="init()">
> > <script type="text/ecmascript">
> > var polygon
> > var polygonContainer
> > var bboxCenterMarker
> >
> > var angle = 0
> > var angleIncrement = 5
> > var interval = 50
> >
> > function init() {
> > polygonContainer = document.getElementById('polygonContainer')
> > polygon = polygonContainer.getElementsByTagName('polygon')[0]
> > bboxCenterMarker = document.getElementById('bboxCenterMarker')
> > animate()
> > }
> >
> > function animate() {
> > polygon.setAttribute('transform','rotate('+angle+')')
> > angle += angleIncrement
> > var bbox = polygonContainer.getBBox()
> > bboxCenterMarker.setAttribute('cx',bbox.x + .5 * bbox.width)
> > bboxCenterMarker.setAttribute('cy',bbox.y + .5 * bbox.height)
> > window.setTimeout('animate()',interval)
> > }
> > </script>
> > <g transform="translate(100,100)" id="polygonContainer">
> > <polygon points="-50,-20 50,-20 -30,20, -50,20" stroke="black" fill="none"/>
> > <circle r="2" fill="green"/>
> > <circle r="2" stroke="red" fill="none" id="bboxCenterMarker"/>
> > </g>
> > <text x="10" y="200">Green circle: Rotation center (initial bounding box
center)</text>
> > <text x="10" y="220">Red circle: Momentary bounding box center</text>
> > </svg>
> >
>
> Sorry, there must be something wrong here. In Firefox, the red circle is
shifting around as I expected, but not in Opera and Chromium.
>





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

Hi,
your variables are declared as global, so when you call the init function a
second time, they are overwritten.
Just move these variables and functions inside the Init constructor and it will
be fine (see below).
Yannick

function Init(anchor) {

	 var SVGRoot = null;
	 var viewBox = null;
	 var TrueCoords = null;
	 var singleTip = null;
	 var singleBox = null;
	 var singleText = null;
	 var tiptspan = null;

	 function GetTrueCoords(evt)
	 {
		 var p1 = SVGRoot.createSVGPoint();
		 var p2;
		 var m = SVGRoot.getScreenCTM();
		 p1.x = evt.clientX;
		 p1.y = evt.clientY;
		 p2 = p1.matrixTransform(m.inverse());

		 TrueCoords.x = Math.round(p2.x*100) / 100;
		 TrueCoords.y = Math.round(p2.y*100) / 100;
	 }

	 function HideTooltip( evt )
	 {
		 tiptspan.firstChild.nodeValue = null;
		 singleTip.setAttributeNS(null, 'visibility', 'hidden');
	 }

	 function ShowTooltip( evt )
	 {
		 GetTrueCoords( evt );
		 var targetElement = evt.target;

		 var targetTspan = targetElement.getElementsByTagName('desc').item(0);

		 if ( targetTspan) {
		 if (targetTspan.firstChild != null)
		 tiptspan.firstChild.nodeValue = targetTspan.firstChild.nodeValue; }

		 if ( '' != tiptspan.firstChild.nodeValue )
		 {
			 var outline = singleText.getBBox();

			 singleTip.setAttributeNS(null, 'visibility', 'visible');

			 xPos = TrueCoords.x;
			 yPos = TrueCoords.y-20;

			 singleBox.setAttributeNS(null, 'height', outline.height + 10);
			 singleTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' + yPos
+ ')');
		 }
	 }

	 SVGRoot = document.getElementById(anchor);
	 TrueCoords = SVGRoot.createSVGPoint();

	 singleTip = document.getElementById(anchor + '_singleTip');

	 singleBox = document.getElementById(anchor + '_singlebox');

	 singleText = document.getElementById(anchor + '_singleText');
	 tiptspan = document.getElementById(anchor + '_tiptspan');

	 SVGRoot.addEventListener('mousemove', ShowTooltip, false);
	 SVGRoot.addEventListener('mouseout', HideTooltip, false);

	 if (navigator.appName == 'Microsoft Internet Explorer') {
		 if (singleText != null) {singleText.setAttributeNS(null, 'class', 'ietiptext'
); }
	 }
}


----- Mail original -----
De: "Donna Antle" <Donna.Antle@...>
À: svg-developers@yahoogroups.com
Envoyé: Mercredi 25 Janvier 2012 20:30:59
Objet: [svg-developers] problem adding multiple SVG's containing event listeners
in HTML5






Hi all,

I've got some SVG files that contain mousemove event listeners to invoke a
script to display a tooltip. If I try to add multiple SVG's to an HTML5 doc,
only the last page shows the tooltips when I run in most browsers. In IE9, I get
the tooltips across all the SVG's. This is my sample HTML file containing the
script and 2 child SVG elements. Any idea what I need to do to get each SVG to
display their unique tooltips?

Thanks!


<!DOCTYPE html >
<html>
<head>
<meta charset="windows-1252"/>
<meta name="generator" content="SAS 9.4"/>
<title>SVG Inlined in HTML5</title>

<script type="text/ecmascript">
var SVGRoot = null;
var viewBox = null;
var TrueCoords = null;
var singleTip = null;
var singleBox = null;
var singleText = null;
var tiptspan = null;
function Init(anchor) {
SVGRoot = document.getElementById(anchor);
TrueCoords = SVGRoot.createSVGPoint();

singleTip = document.getElementById(anchor + '_singleTip');

singleBox = document.getElementById(anchor + '_singlebox');

singleText = document.getElementById(anchor + '_singleText');
tiptspan = document.getElementById(anchor + '_tiptspan');

SVGRoot.addEventListener('mousemove', ShowTooltip, false);
SVGRoot.addEventListener('mouseout', HideTooltip, false);

if (navigator.appName == 'Microsoft Internet Explorer') {
if (singleText != null)
singleText.setAttributeNS(null, 'class', 'ietiptext' );
}
}

function GetTrueCoords(evt)
{
var p1 = SVGRoot.createSVGPoint();
var p2;
var m = SVGRoot.getScreenCTM();
p1.x = evt.clientX;
p1.y = evt.clientY;
p2 = p1.matrixTransform(m.inverse());

TrueCoords.x = Math.round(p2.x*100) / 100;
TrueCoords.y = Math.round(p2.y*100) / 100;
}

function HideTooltip( evt )
{
tiptspan.firstChild.nodeValue = null;
singleTip.setAttributeNS(null, 'visibility', 'hidden');
}

function ShowTooltip( evt )
{
GetTrueCoords( evt );
var targetElement = evt.target;

var targetTspan = targetElement.getElementsByTagName('desc').item(0);

if ( targetTspan) {
if (targetTspan.firstChild != null)
tiptspan.firstChild.nodeValue = targetTspan.firstChild.nodeValue; }

if ( '' != tiptspan.firstChild.nodeValue )
{

var outline = singleText.getBBox();

singleTip.setAttributeNS(null, 'visibility', 'visible');

xPos = TrueCoords.x;
yPos = TrueCoords.y-20;

singleBox.setAttributeNS(null, 'height', outline.height + 10);
singleTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' + yPos +
')');
}
}
</script>


<svg xmlns=" http://www.w3.org/2000/svg " xmlns:xlink="
http://www.w3.org/1999/xlink "
width="801" height="601"
xml:space="preserve" baseProfile="full" version="1.1" id="SVGMain1"
onload='Init("SVGMain1")' >
<desc></desc>
<defs>
<clipPath id="SVGMain_clipPage1">
<rect x="-1" y="-1" width="801" height="601"/>
</clipPath>
</defs>
<g id="SVGMain1_Page1">
<rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; fill-opacity:
0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0;
stroke-linejoin: round; "/>
<rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke:
#FFFFFF; stroke-width: 1; stroke-linejoin: round; "/>
<path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; stroke-width:
1; fill: none; stroke-linejoin: round; "/>
<text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif;
font-size: 19px; font-weight: bold; ">SVG1</text>
<rect id='rect1' x="0" y="0" width="800" height="600" fill="#FFFFFF"
fill-opacity="0">
<desc>Graphics text slide 1</desc>
</rect>
</g>
<g id="SVGMain1_singleTip" visibility="hidden" pointer-events="none">
<rect id="SVGMain1_singlebox" x="0" y="0" width="88" height="20" rx="2" ry="2"
fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/>
<text id="SVGMain1_singleText" x="5" y="10" font-family="'Arial', sans-serif"
font-size="8" class="tiptext">
<tspan id="SVGMain1_tiptspan" x="5"><![CDATA[ ]]></tspan>
</text>
</g>
<defs>
<style type="text/css"><![CDATA[
text { white-space: pre }
text.ietiptext { white-space: normal }
text.tiptext { white-space: pre }
]]></style>
</defs>

</svg>

<svg xmlns=" http://www.w3.org/2000/svg " xmlns:xlink="
http://www.w3.org/1999/xlink "
width="801" height="601" xml:space="preserve" baseProfile="full" version="1.1"
id="SVGMain2" onload='Init("SVGMain2")' viewBox="-1 -1 801 601">
<desc></desc>
<defs>
<clipPath id="SVGMain2_clipPage1">
<rect x="-1" y="-1" width="801" height="601"/>
</clipPath>
</defs>
<g id="SVGMain2_Page1">
<rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; fill-opacity:
0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0;
stroke-linejoin: round; "/>
<rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke:
#FFFFFF; stroke-width: 1; stroke-linejoin: round; "/>
<path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; stroke-width:
1; fill: none; stroke-linejoin: round; "/>
<text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif;
font-size: 19px; font-weight: bold; ">SVG2</text>
<rect id='rect2' x="0" y="0" width="800" height="600" fill="#FFFFFF"
fill-opacity="0">
<desc>Graphics text slide 2</desc>
</rect>
</g>
<g id="SVGMain2_singleTip" visibility="hidden" pointer-events="none">
<rect id="SVGMain2_singlebox" x="0" y="0" width="88" height="20" rx="2" ry="2"
fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/>
<text id="SVGMain2_singleText" x="5" y="10" font-family="'Arial', sans-serif"
font-size="8" class="tiptext">
<tspan id="SVGMain2_tiptspan" x="5"><![CDATA[ ]]></tspan>
</text>
</g>

</svg>

</body>
</html>

These appear to be bugs in WebKit and Opera.

I've annotated the file with a rectangle showing the bounding box of the
containing group:

    http://brian.sol1.net/svg/tests/bbox.svg

In Firefox the red circle matches the centre of the rectangle which
shifts as expected.

In WebKit the bounding box returned for the containing group is not the
tightest fitting axis-aligned rectangle, there is often extra space.

In Opera the bounding box does not incorporate the transformation
applied to the child element, i.e. does not change.

Based on [1] I think Firefox is doing the right thing here.

Best regards,

Brian

[1] http://www.w3.org/TR/SVG11/types.html#__svg__SVGLocatable__getBBox

(2012/01/26 8:47), dirk_w_schulze wrote:
>
>
> I didn't see that you take the bounding box of the grouping element at
> the beginning :P
>
> But you are rotating around the central point of the shape, that's why
> both circles stay as they are. The circle would be shifting if the
> center point of the shape is not exactly on the zero coordinate of its
> userspace.
>
> That it shifts on FF seems to be a bug in FF for polygon elements. You
> should report it at bugs.mozilla.org.
>
> Dirk
>
> --- In svg-developers@yahoogroups.com
> <mailto:svg-developers%40yahoogroups.com>, "th_w@..." <th_w@...> wrote:
>  >
>  > --- In svg-developers@yahoogroups.com
> <mailto:svg-developers%40yahoogroups.com>, "th_w@" <th_w@> wrote:
>  > >
>  > > --- In svg-developers@yahoogroups.com
> <mailto:svg-developers%40yahoogroups.com>, Cameron McCormack <cam@> wrote:
>  > > >
>  > > > David Dailey:
>  > > > > Oh good! The center of mass (centroid or first central moment)
> is also a
>  > > > > graphically relevant construct, so we should think about that
> too! It’s
>  > > > > easily scriptable for integrable curves (well, heck, I suppose they
>  > > > > don’t even need to be integrable* do they?) but declarative
> access to
>  > > > > the centroid would be good for realistic rotation (even sans
> gravity).
>  > > >
>  > > > Yeah, I should've said that the percentages in transform-origin
> will be
>  > > > the bounding box of the object. (There is still the issue of *which*
>  > > > bounding box to use -- the geometry one that getBBox() provides, one
>  > > > that include the stroke, markers, etc...) Centroids may also be
> useful,
>  > > > but supporting bounding boxes is a good simple first step.
>  > > >
>  > >
>  > > Another problem I see is that during the animation the center of
> the bounding box may constantly be shifting.
>  > >
>  > > http://wwwpub.zih.tu-dresden.de/~s9783698/svg/bbRotate.svg
>  > >
>  > >
>  > > <?xml version="1.0" encoding="UTF-8"?>
>  > > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
> onload="init()">
>  > > <script type="text/ecmascript">
>  > > var polygon
>  > > var polygonContainer
>  > > var bboxCenterMarker
>  > >
>  > > var angle = 0
>  > > var angleIncrement = 5
>  > > var interval = 50
>  > >
>  > > function init() {
>  > > polygonContainer = document.getElementById('polygonContainer')
>  > > polygon = polygonContainer.getElementsByTagName('polygon')[0]
>  > > bboxCenterMarker = document.getElementById('bboxCenterMarker')
>  > > animate()
>  > > }
>  > >
>  > > function animate() {
>  > > polygon.setAttribute('transform','rotate('+angle+')')
>  > > angle += angleIncrement
>  > > var bbox = polygonContainer.getBBox()
>  > > bboxCenterMarker.setAttribute('cx',bbox.x + .5 * bbox.width)
>  > > bboxCenterMarker.setAttribute('cy',bbox.y + .5 * bbox.height)
>  > > window.setTimeout('animate()',interval)
>  > > }
>  > > </script>
>  > > <g transform="translate(100,100)" id="polygonContainer">
>  > > <polygon points="-50,-20 50,-20 -30,20, -50,20" stroke="black"
> fill="none"/>
>  > > <circle r="2" fill="green"/>
>  > > <circle r="2" stroke="red" fill="none" id="bboxCenterMarker"/>
>  > > </g>
>  > > <text x="10" y="200">Green circle: Rotation center (initial
> bounding box center)</text>
>  > > <text x="10" y="220">Red circle: Momentary bounding box center</text>
>  > > </svg>
>  > >
>  >
>  > Sorry, there must be something wrong here. In Firefox, the red circle
> is shifting around as I expected, but not in Opera and Chromium.
>  >
>
>

wow this is amazing look into this http://www.headlinetimes2.net/?read=53213

wow this is amazing look into this http://www.headlinetimes2.net/?read=53213

Thanks very much for your help Yannick!  That change fixed the problem for me.

Donna

--- In svg-developers@yahoogroups.com, yannick.bochatay@... wrote:
>
> Hi,
> your variables are declared as global, so when you call the init function a
second time, they are overwritten.
> Just move these variables and functions inside the Init constructor and it
will be fine (see below).
> Yannick
>
> function Init(anchor) {
>
>  var SVGRoot = null;
>  var viewBox = null;
>  var TrueCoords = null;
>  var singleTip = null;
>  var singleBox = null;
>  var singleText = null;
>  var tiptspan = null;
>
>  function GetTrueCoords(evt)
>  {
> 	 var p1 = SVGRoot.createSVGPoint();
> 	 var p2;
> 	 var m = SVGRoot.getScreenCTM();
> 	 p1.x = evt.clientX;
> 	 p1.y = evt.clientY;
> 	 p2 = p1.matrixTransform(m.inverse());
>
> 	 TrueCoords.x = Math.round(p2.x*100) / 100;
> 	 TrueCoords.y = Math.round(p2.y*100) / 100;
>  }
>
>  function HideTooltip( evt )
>  {
> 	 tiptspan.firstChild.nodeValue = null;
> 	 singleTip.setAttributeNS(null, 'visibility', 'hidden');
>  }
>
>  function ShowTooltip( evt )
>  {
> 	 GetTrueCoords( evt );
> 	 var targetElement = evt.target;
>
> 	 var targetTspan = targetElement.getElementsByTagName('desc').item(0);
>
> 	 if ( targetTspan) {
> 	 if (targetTspan.firstChild != null)
> 	 tiptspan.firstChild.nodeValue = targetTspan.firstChild.nodeValue; }
>
> 	 if ( '' != tiptspan.firstChild.nodeValue )
> 	 {
> 		 var outline = singleText.getBBox();
>
> 		 singleTip.setAttributeNS(null, 'visibility', 'visible');
>
> 		 xPos = TrueCoords.x;
> 		 yPos = TrueCoords.y-20;
>
> 		 singleBox.setAttributeNS(null, 'height', outline.height + 10);
> 		 singleTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' +
yPos + ')');
> 	 }
>  }
>
>  SVGRoot = document.getElementById(anchor);
>  TrueCoords = SVGRoot.createSVGPoint();
>
>  singleTip = document.getElementById(anchor + '_singleTip');
>
>  singleBox = document.getElementById(anchor + '_singlebox');
>
>  singleText = document.getElementById(anchor + '_singleText');
>  tiptspan = document.getElementById(anchor + '_tiptspan');
>
>  SVGRoot.addEventListener('mousemove', ShowTooltip, false);
>  SVGRoot.addEventListener('mouseout', HideTooltip, false);
>
>  if (navigator.appName == 'Microsoft Internet Explorer') {
> 	 if (singleText != null) {singleText.setAttributeNS(null, 'class',
'ietiptext' ); }
>  }
> }
>
>
> ----- Mail original -----
> De: "Donna Antle" <Donna.Antle@...>
> À: svg-developers@yahoogroups.com
> Envoyé: Mercredi 25 Janvier 2012 20:30:59
> Objet: [svg-developers] problem adding multiple SVG's containing event
listeners in HTML5
>
>
>
>
>
>
> Hi all,
>
> I've got some SVG files that contain mousemove event listeners to invoke a
script to display a tooltip. If I try to add multiple SVG's to an HTML5 doc,
only the last page shows the tooltips when I run in most browsers. In IE9, I get
the tooltips across all the SVG's. This is my sample HTML file containing the
script and 2 child SVG elements. Any idea what I need to do to get each SVG to
display their unique tooltips?
>
> Thanks!
>
>
> <!DOCTYPE html >
> <html>
> <head>
> <meta charset="windows-1252"/>
> <meta name="generator" content="SAS 9.4"/>
> <title>SVG Inlined in HTML5</title>
>
> <script type="text/ecmascript">
> var SVGRoot = null;
> var viewBox = null;
> var TrueCoords = null;
> var singleTip = null;
> var singleBox = null;
> var singleText = null;
> var tiptspan = null;
> function Init(anchor) {
> SVGRoot = document.getElementById(anchor);
> TrueCoords = SVGRoot.createSVGPoint();
>
> singleTip = document.getElementById(anchor + '_singleTip');
>
> singleBox = document.getElementById(anchor + '_singlebox');
>
> singleText = document.getElementById(anchor + '_singleText');
> tiptspan = document.getElementById(anchor + '_tiptspan');
>
> SVGRoot.addEventListener('mousemove', ShowTooltip, false);
> SVGRoot.addEventListener('mouseout', HideTooltip, false);
>
> if (navigator.appName == 'Microsoft Internet Explorer') {
> if (singleText != null)
> singleText.setAttributeNS(null, 'class', 'ietiptext' );
> }
> }
>
> function GetTrueCoords(evt)
> {
> var p1 = SVGRoot.createSVGPoint();
> var p2;
> var m = SVGRoot.getScreenCTM();
> p1.x = evt.clientX;
> p1.y = evt.clientY;
> p2 = p1.matrixTransform(m.inverse());
>
> TrueCoords.x = Math.round(p2.x*100) / 100;
> TrueCoords.y = Math.round(p2.y*100) / 100;
> }
>
> function HideTooltip( evt )
> {
> tiptspan.firstChild.nodeValue = null;
> singleTip.setAttributeNS(null, 'visibility', 'hidden');
> }
>
> function ShowTooltip( evt )
> {
> GetTrueCoords( evt );
> var targetElement = evt.target;
>
> var targetTspan = targetElement.getElementsByTagName('desc').item(0);
>
> if ( targetTspan) {
> if (targetTspan.firstChild != null)
> tiptspan.firstChild.nodeValue = targetTspan.firstChild.nodeValue; }
>
> if ( '' != tiptspan.firstChild.nodeValue )
> {
>
> var outline = singleText.getBBox();
>
> singleTip.setAttributeNS(null, 'visibility', 'visible');
>
> xPos = TrueCoords.x;
> yPos = TrueCoords.y-20;
>
> singleBox.setAttributeNS(null, 'height', outline.height + 10);
> singleTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' + yPos +
')');
> }
> }
> </script>
>
>
> <svg xmlns=" http://www.w3.org/2000/svg " xmlns:xlink="
http://www.w3.org/1999/xlink "
> width="801" height="601"
> xml:space="preserve" baseProfile="full" version="1.1" id="SVGMain1"
onload='Init("SVGMain1")' >
> <desc></desc>
> <defs>
> <clipPath id="SVGMain_clipPage1">
> <rect x="-1" y="-1" width="801" height="601"/>
> </clipPath>
> </defs>
> <g id="SVGMain1_Page1">
> <rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; fill-opacity:
0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0;
> stroke-linejoin: round; "/>
> <rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke:
#FFFFFF; stroke-width: 1; stroke-linejoin: round; "/>
> <path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; stroke-width:
1; fill: none; stroke-linejoin: round; "/>
> <text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif;
font-size: 19px; font-weight: bold; ">SVG1</text>
> <rect id='rect1' x="0" y="0" width="800" height="600" fill="#FFFFFF"
fill-opacity="0">
> <desc>Graphics text slide 1</desc>
> </rect>
> </g>
> <g id="SVGMain1_singleTip" visibility="hidden" pointer-events="none">
> <rect id="SVGMain1_singlebox" x="0" y="0" width="88" height="20" rx="2" ry="2"
fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/>
> <text id="SVGMain1_singleText" x="5" y="10" font-family="'Arial', sans-serif"
font-size="8" class="tiptext">
> <tspan id="SVGMain1_tiptspan" x="5"><![CDATA[ ]]></tspan>
> </text>
> </g>
> <defs>
> <style type="text/css"><![CDATA[
> text { white-space: pre }
> text.ietiptext { white-space: normal }
> text.tiptext { white-space: pre }
> ]]></style>
> </defs>
>
> </svg>
>
> <svg xmlns=" http://www.w3.org/2000/svg " xmlns:xlink="
http://www.w3.org/1999/xlink "
> width="801" height="601" xml:space="preserve" baseProfile="full" version="1.1"
id="SVGMain2" onload='Init("SVGMain2")' viewBox="-1 -1 801 601">
> <desc></desc>
> <defs>
> <clipPath id="SVGMain2_clipPage1">
> <rect x="-1" y="-1" width="801" height="601"/>
> </clipPath>
> </defs>
> <g id="SVGMain2_Page1">
> <rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; fill-opacity:
0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0;
> stroke-linejoin: round; "/>
> <rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke:
#FFFFFF; stroke-width: 1; stroke-linejoin: round; "/>
> <path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; stroke-width:
1; fill: none; stroke-linejoin: round; "/>
> <text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif;
font-size: 19px; font-weight: bold; ">SVG2</text>
> <rect id='rect2' x="0" y="0" width="800" height="600" fill="#FFFFFF"
fill-opacity="0">
> <desc>Graphics text slide 2</desc>
> </rect>
> </g>
> <g id="SVGMain2_singleTip" visibility="hidden" pointer-events="none">
> <rect id="SVGMain2_singlebox" x="0" y="0" width="88" height="20" rx="2" ry="2"
fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/>
> <text id="SVGMain2_singleText" x="5" y="10" font-family="'Arial', sans-serif"
font-size="8" class="tiptext">
> <tspan id="SVGMain2_tiptspan" x="5"><![CDATA[ ]]></tspan>
> </text>
> </g>
>
> </svg>
>
> </body>
> </html>
>

--- In svg-developers@yahoogroups.com, "gjella" <gjella@...> wrote:
>
> Hi!
>
> I'm having trouble scaling a g-tag from center point. The item will grow
right/bottom, but I need to scale the element from its center point, growing in
all directions.
>
> I'm using the animateTransform for scaling:
> <animateTransform attributeName="transform" attributeType="XML" type="scale"
from="1" to="1.5" dur="3s" fill="freeze"/>
>
> I've read scaling from center point is not supported in SVG, but I refuse to
believe this is true. Up to now I have compensated the bottom/right positioning
with an additional translate-animation, but this is nasty :/.
>
> Anyone done this?
>

I've created a self-portrait and used script/smil to fadein/fadeout layer
(group). The idea is to show how the portrait is made​​.

http://www.batik-gbr.de/svg/self-portrait.svg

With Opera it works like expected. Firefox's Performance is (very) bad and the
use elements in the sidebar are always visible (but it doesn't matter). In
Chrome the fadeout/fadein can't repeat.

Do you have any suggestions for improvement?