W3C home > Mailing lists > Public > www-svg@w3.org > September 2015

Re: moving nodes of a mesh

From: Juergen Roethig <roethig@dhbw-karlsruhe.de>
Date: Wed, 23 Sep 2015 00:28:14 +0200
To: olivier pantz <olivier.pantz@polytechnique.org>, <www-svg@w3.org>
Message-ID: <5601D5FE.2070502@dhbw-karlsruhe.de>
Hello Olivier, hello all,

Am 21.09.15 um 22:51 schrieb olivier pantz:
> I couldn't found a really satisfying solution to my problem. I would
> like to display, animate and color (I save this one for later) meshes
> like the one attached to this email  (the svg script is not very
> pretty... it is just to illustrate what I mean by mesh).
> It is made of several triangles. Each triangle  have either one point,
> one edge or nothing in common with another one. I follows that one
> point of the mesh is shared by several triangles.
> Its is not difficult to create the mesh.svg file (once you have the
> list of triangles and there coordinates). But it is very redundant
> (because the coordinates of one point  appears at several instances).
> It is not a big issue for a static svg file (even if it makes it
> weight more than necessary). But if you want to animate the svg file,
> it became more tricky: Each time   a node of the mesh is moved, you
> have to animate the corresponding coordinates in the path of every
> triangles it belongs to. It is not impossible, but still challenging
> and rather not clean.
> I would like to define the nodes (for instance as circles) then to
> define each edge as a line going from the center of one node to the
> other. So I would like to do something like this
> <svg>
> <circle id="node1" cx="0" cy="0" r="0"/>
> <circle id="node2" cx="10" cy="0" r="0"/>
> <circle id="node3" cx="10" cy="10" r="0"/>
> <circle id="node4" cx="0" cy="10" r="0"/>
> <path id="triangle1" d="M #node1.cx #node1.cy L #node2.cx #node2.cy L
> #node3cx node3.cy L #node1.cx #node1.cy"/>
> <path id="triangle2" d="M #node4.cx #node4.cy L #node2.cx #node2.cy L
> #node3cx node3.cy L #node4.cx #node4.cy"/>
> </svg>
> Assuming it was working (it doesn't),  animating node2  would animate
> both triangles...
> Is it possible to do something in the same spirit ?
> (I know that using javascript could probably solve the issue... but if
> someone has a svg/smil solution... it would be perfect).

The solution to your problem would be "reference points" in SVG. Such 
things had been discussed few times in the context of "connectors" on 
the SVG list, but unfortunately, connectors (or just reference points - 
one would not need special connectors at all) are neither part of the 
existing SVG 1.1 standard nor (actually) planned to be included in the 
upcoming SVG 2, although there were some statements that some proposal 
would be prepared for that.

You might read more about one proposal for "connectors" (which is indeed 
a proposal for reference points) on
The page also includes links to some messages made on the mailing list 
as well as other proposals (which are more like proposals for "connectors").

And if you would like to see some working example made with the help of 
that syntax extension and a very rudimentary prototypical implementation 
(via XSLT and JavaScript), you might have a look at
Then, your example reads like

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="connector2svg-js.xsl" ?>
<jr:svg xmlns="http://www.w3.org/2000/svg" 
xmlns:jr="http://jroethig.de/svg" version="1.1" width="800" height="800" 
viewBox="-100 -100 200 200">
<title>Example for using reference points in a mesh</title>
<jr:script />
<script type="text/javascript">
var i=0;
function animate() {
  var thiselement = document.getElementById("node2group");
  thiselement.setAttributeNS(null, "transform", 
"translate("+50*Math.sin(0.1*i)+","+25*Math.cos(0.1*i)+")" );
  setTimeout( function() { needcorrection(true); correctcoordinates(); 
}, 5 );
  setTimeout( function() { animate(); }, 100 );
<g transform="scale(1)" style="stroke: red; stroke-width: 1px; fill: blue;">
<jr:point refid="node1" point="0,0" />
<g id="node2group" transform="translate(0,0)"><jr:point refid="node2" 
point="10,0" /></g>
<jr:point refid="node3" point="10,10" />
<jr:point refid="node4" point="0,10" />
<path id="triangle1" jr:d="M refpoint(node1) L refpoint(node2) L 
refpoint(node3) L refpoint(node1)" onclick="animate();" />
<path id="triangle2" jr:d="M refpoint(node4) L refpoint(node2) L 
refpoint(node3) L refpoint(node4)" />

The JavaScipt part above is the animation (don't know whether my 
prototype would cope with SVG declarative animation - probably not). And 
that's done via a transform of a group containing the relevant point - 
at the time the JavaScript is performed, the <jr:point> object 
representing the reference point is no longer existant, because it is 
replaced via XSLT with some <use>, so I can no longer change its 
coordinates directly. But nevermind, the principle is shown, and if 
reference points would get included in SVG some time, you would not need 
to mind such details ...

BTW, if you are accidentally near Pittsburgh, you might attend the 
Graphical Web Conference 2015 and listen to my talk about reference 
points which takes place tomorrow (Wednesday) at 14:30 ... see
I don't know why David Dailey did not mention "reference points" in his 
reply to your answer, since he should be pretty familiar with that 
conference and the topics/talks to take place, then ;-)

Best regards,

Juergen Roethig
Received on Tuesday, 22 September 2015 22:28:54 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:55:03 UTC