[svg-developers] Re: embedding SVG file into another SVG file
Hi, I'ved tried embedding it as image,still i dont know how to extract the value from the file. The code i'ved post here, seems like it has to be done using HTML files that act as a middle person connecting those two SVG files. I have yet to test that method.still in the process of fixing my coding regarding my SP. Cha --- In svg-developers@yahoogroups.com, Philippe Lhoste [EMAIL PROTECTED] wrote: e2mieluv wrote: please help me to clear up this matter. Is it possible to link 2 svg file togather to enable 1 svg file to retrieve value from another svg file. i'ved found on the net that i could use the script below. however no saying how i should call or include the 2 svg files. the site example battlebots, i was unable to find the source of the file to look at it. var bot = document.embeds[bot].getSVGDocument(); bot.getElementById(Help).setAttribute (style,display:inline;); Can anyone help me to clarify this? Thanks, Cha Well, here is the file I made to compare an original bitmap to the two files made by two different BMP to SVG converters: ?xml version=1.0 encoding=ISO-8859-1 standalone=no? svg xmlns=http://www.w3.org/2000/svg; xmlns:xlink=http://www.w3.org/1999/xlink; g id=Bitmap visibility=visible image xlink:href=Bitmap.png width=262 height=133/ image xlink:href=Bitmap_pot.svg width=262 height=133 transform=translate(0, 150)/ image xlink:href=Bitmap_at.svg width=262 height=133 transform=translate(0, 300)/ /g /svg As you see, you just have to declare an image element. Now, I don't know yet how to access to the embed Dom, I suppose your code fragment gives some hints on this. -- Philippe Lhoste -- (near) Paris -- France -- http://Phi.Lho.free.fr -- For servers mangling my From and Reply-To fields, -- please send private answers to PhiLho(a)GMX.net -- -- -- -- -- -- -- -- -- -- -- -- -- -- - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] embedding SVG file into another SVG file
Hi, please help me to clear up this matter. Is it possible to link 2 svg file togather to enable 1 svg file to retrieve value from another svg file. i'ved found on the net that i could use the script below. however no saying how i should call or include the 2 svg files. the site example battlebots, i was unable to find the source of the file to look at it. var bot = document.embeds[bot].getSVGDocument(); bot.getElementById(Help).setAttribute(style,display:inline;); Can anyone help me to clarify this? Thanks, Cha - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: path parser - extract path
Hi.. thanks for the info, my purpose is to get all those points in a path rather than just M value since i would need to use all the points to put into an array for processing later.so i'll need to extract all the points. path parser has able to extract multiple path and extract 1 point(x y) however, in this case i would like to further divide into 2 different point as in point x and point y to be in an array. i'll still give it a try and see how it goes. thanks again... --- In svg-developers@yahoogroups.com, Philippe Lhoste [EMAIL PROTECTED] wrote: e2mieluv wrote: It does work great in extracting the points from the path as I wanted.one thing i would like to know however, will it only abstract the M points and not the rest? since most path drawn by maps would have multiple joints of path in a single drawn path. thanks again! i'm trying it as i type =) As I understand the way Kevin manipulates paths, each particular command gets its command handler, ie. M will be treated by a different handler than L or even than m. Now, a M 1,1 1,10 10,1 will be treated as M 1,1 L 1,10 L 10,1, I think. So yes, the movetoAbs handler will get only M points. But if you have something like M 1,1 L 1,10 L10,1 z M 5,20 L 20,10 L 10,20 z, you will get two calls to movetoAbs handler. -- Philippe Lhoste -- (near) Paris -- France -- http://Phi.Lho.free.fr -- For servers mangling my From and Reply-To fields, -- please send private answers to PhiLho(a)GMX.net -- -- -- -- -- -- -- -- -- -- -- -- -- -- - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: path parser - extract path
Thanks philippe!
It does work great in extracting the points from the path as I
wanted.one thing i would like to know however, will it only abstract
the M points and not the rest? since most path drawn by maps would
have multiple joints of path in a single drawn path.
thanks again!
i'm trying it as i type =)
--- In svg-developers@yahoogroups.com, Philippe Lhoste [EMAIL PROTECTED]
wrote:
e2mieluv wrote:
i do hope you guys could help me with this. Kevin's path parser is
really useful in extracting multiple path.however,i'm finding
difficulty to extract the path that has been retrieve by the path
parser into 1 points.
in the example it uses tspan which to manipulate text and 1 more
thing
i forgot. but how to extract the path?
ex. path extracted M a,b L c,d
would like to extract it as point a,b to be save in an array.
anyone knows how the path parser could work that way? please help
me,
thanks!
the example prog.
?xml version=1.0 encoding=utf-8 standalone=no?
!DOCTYPE svg PUBLIC -//W3C//DTD SVG 20010904//EN
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd;
svg onload=init(evt)
xmlns=http://www.w3.org/2000/svg;
xmlns:xlink=http://www.w3.org/1999/xlink;
script type=text/ecmascript
xlink:href=path_parser.js.gz/
script type=text/ecmascript xlink:href=SampleHandler.js/
script type=text/ecmascript![CDATA[
var stdout;
var parser = new PathParser();
function init(e) {
if ( window.svgDocument == null )
svgDocument = e.target.ownerDocument;
stdout = svgDocument.getElementById(stdout);
parser.setHandler(new SampleHandler());
parse(path1);
parse(path2);
parse(path3);
var r = '';
for (var i = 0; i mNb; i++) { r += mArray[i] + ','; }
alert(r);
}
function parse(id) {
var source = svgDocument.getElementById(id);
var pathData = source.getAttributeNS(null, d);
println(Parsing: + pathData);
parser.parseData(pathData);
}
function println(msg) {
/*var tspan = svgDocument.createElementNS
(Svg.NAMESPACE, tspan);
tspan.setAttributeNS(null, x, 3);
tspan.setAttributeNS(null, dy, 1em);
tspan.appendChild( svgDocument.createTextNode(msg) );
stdout.appendChild(tspan);*/
}
var mArray = {};
var mNb = 0;
SampleHandler.prototype.movetoAbs = function(x, y) {
mArray[mNb++] = x;
mArray[mNb++] = y;
};
]]/script
g
path id=path1
d=M300,25 L450,100
stroke=gold stroke-width=5
fill=none/
path id=path2
d=M450,100 L250,150
stroke=blue stroke-width=5 fill=none/
path id=path3
d=M250,150 L300,25
stroke=blue stroke-width=5 fill=none/
/g
text id=stdout /text
/svg
OK, I am not sure of what you can do.
Perhaps it would be easier to use Kevin's PathData object than
PathParser.
But if you want to stick to it for any reason, either you drop the
SampleHandler to replace it with your own code, similar but more on
the
aim, or you do as I did above: override the
SampleHandler.prototype.movetoAbs function to write your own.
This function is called each time a M command is found, and there I
store the corresponding two coordinates in an array.
At the end, I just display the content of the array.
HTH.
--
Philippe Lhoste
-- (near) Paris -- France
-- http://Phi.Lho.free.fr
-- For servers mangling my From and Reply-To fields,
-- please send private answers to PhiLho(a)GMX.net
-- -- -- -- -- -- -- -- -- -- -- -- -- --
-
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click edit my
membership
Yahoo! Groups Links
* To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
* To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
* Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
[svg-developers] path parser - extract path
Hi all,
i do hope you guys could help me with this. Kevin's path parser is
really useful in extracting multiple path.however,i'm finding
difficulty to extract the path that has been retrieve by the path
parser into 1 points.
in the example it uses tspan which to manipulate text and 1 more thing
i forgot. but how to extract the path?
ex. path extracted M a,b L c,d
would like to extract it as point a,b to be save in an array.
anyone knows how the path parser could work that way? please help me,
thanks!
the example prog.
?xml version=1.0 encoding=utf-8 standalone=no?
!DOCTYPE svg PUBLIC -//W3C//DTD SVG 20010904//EN
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd;
svg onload=init(evt)
xmlns=http://www.w3.org/2000/svg;
xmlns:xlink=http://www.w3.org/1999/xlink;
script type=text/ecmascript xlink:href=path_parser.js.gz/
script type=text/ecmascript xlink:href=SampleHandler.js/
script type=text/ecmascript![CDATA[
var stdout;
var parser = new PathParser();
function init(e) {
if ( window.svgDocument == null )
svgDocument = e.target.ownerDocument;
stdout = svgDocument.getElementById(stdout);
parser.setHandler(new SampleHandler());
parse(path1);
parse(path2);
parse(path3);
}
function parse(id) {
var source = svgDocument.getElementById(id);
var pathData = source.getAttributeNS(null, d);
println(Parsing: + pathData);
parser.parseData(pathData);
}
function println(msg) {
/*var tspan = svgDocument.createElementNS(Svg.NAMESPACE, tspan);
tspan.setAttributeNS(null, x, 3);
tspan.setAttributeNS(null, dy, 1em);
tspan.appendChild( svgDocument.createTextNode(msg) );
stdout.appendChild(tspan);*/
}
]]/script
g
path id=path1
d=M300,25 L450,100
stroke=gold stroke-width=5
fill=none/
path id=path2
d=M450,100 L250,150
stroke=blue stroke-width=5 fill=none/
path id=path3
d=M250,150 L300,25
stroke=blue stroke-width=5 fill=none/
/g
text id=stdout /text
/svg
-
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click edit my
membership
Yahoo! Groups Links
* To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
* To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
* Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
[svg-developers] Re: help:using path data
Thanks Philippe Lhoste, i'm really new in SVG, so thats why i cant
really debug the problems.i'll try to read up more on SVG to know
where the attributes should be declared sort of things.i'll try it
out.
my aim is to extract the path data (x y coordinates) to calculate
the shortest path of the road.since the code that i currently have
uses points rather than the whole path,i had to extract the value.
thanks again.
--- In svg-developers@yahoogroups.com, Philippe Lhoste [EMAIL PROTECTED]
wrote:
e2mieluv wrote:
really need help here..
I tried using kevin lindsey's path data, however keep getting
error
though i make sure its similar with the example he gave.still i'm
not
able to produce the result that i want. is there something wrong
in
my coding?
thanks..and hope i get some help
I am not a JavaScript guru, but I see a lot of errors in there...
Obviously, this is a work in progress, resulting from many trials
and
errors, so I can't say where code is just trial and what is really
faulty, so I will comment all...
Since I don't know the final goal, I can only guess, and make some
other
test code.
?xml version=1.0?
svg xmlns=http://www.w3.org/2000/svg;
xmlns:xlink=http://www.w3.org/1999/xlink;
xmlns:a3=http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/;
a3:scriptImplementation=Adobe onload='Init(evt)'
script xlink:href=pathData.js/
script![CDATA[
//var SVGDocument = null;
var SVGRoot = null;
function Init(evt)
{
SVGDocument = evt.target.ownerDocument;
var SVGRoot = SVGDocument.documentElement;
For consistency, you should comment out the outside var and add var
before SVGDocument, or do the reverse (ie. declare both inside or
ouside
the function).
var pd = new PathData();
First outch! You use pd ouside this function, so you must declare
it global.
var allPath= SVGDocument.getElementById('path');
There is no 'path' id, should change to 'path_1'...
pd.loadDataFrom(allPath); // use path
data 2 extract the x y value
var points = pd.getSegmentsByCommandName('M');
Same outch!... points must be declared ouside this function.
points = points.concat(pd.getSegmentsByCommandName('M'));
? I am not sure this works.
}
function test(evt)
test() isn't called in your code.
{
//var nodes = new Array();
for (var i=0; i points.length; i++)//extract the
path coordinates
{
//alert(point length +points.length);
I would have put this alert before the loop...
var point = points[i];
Here you use points why is no longer defined, once Init() returned.
point.ox = point.x;
//alert(point.ox +point.ox);
point.oy = point.y;
//alert(point.oy +point.oy);
//nodes.push(point);
var distance = Math.sqrt(point.ox * point.ox + point.oy *
point.oy);
alert(distance +distance);
point[i].removeAttributeNS(null, 'stroke');
point[i].setAttributeNS(null, 'stroke', 'crimson');
? A point has no stroke attribute! And a path segment can't have a
separate color from the remainder of the path...
Perhaps that's why you split the triangle in three parts?
I believe Kevin's code is meant to manipulate the coordinates of
the
nodes, not to change hypothetical attributes.
And in your exploded figure, you can manipulate each segment by
classical JavaScript, without Kevin's code.
//sp found marked red
}
[snip commented out code]
pd.applySegments();
Same problem, pd's life ended with Init()'s one...
}
]]/script
path id='path_1' stroke-width='1' stroke='blue' fill='none'
stroke-
linecap='round'
d='M300,25 450,100'/
path id='path_2' stroke-width='1' stroke='blue' fill='none'
stroke-
linecap='round'
d='M300,25 250,150'/
path id='path_3' stroke-width='1' stroke='blue' fill='none'
stroke-
linecap='round'
d='M450,100 250,150'/
/svg
OK, here is some code which is tested and works. It may not do what
you
wanted to do, but it is a start.
[same start of SVG file]
script![CDATA[
var SVGDocument = null;
var pd = null;
var points = null;
function Init(evt)
{
SVGDocument = evt.target.ownerDocument;
pd = new PathData();
var allPath = SVGDocument.getElementById('path');
pd.loadDataFrom(allPath); // use path data 2 extract the
x y value
points = pd.getSegmentsByCommandName('M');
points = points.concat(pd.getSegmentsByCommandName('L'));
// M10,10 50,10 10,50 is seen as M10,10 L50,10 L10,50
}
function test(evt)
{
for (var i = 0; i points.length; i++)//extract the path
coordinates
{
var point = points[i
[svg-developers] linking 2 svg file together
Hi ppl, i'ved tried searching in this group how to link 2 svg file.I stumble upon it long time ago.however when i tried searching back i cant seem to find it. i need to link this two files, which 1 contains the drawing the other 1 is the calculation part. any help will be appreciated thanks! - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] extracting points from svg
hi, i'm curious bout this.is it possible for me to get the coordinates from drawing the path for example below path id=M123 231 234 456/ say x=123 and y=231 What method in SVG will able be to use that? I'm trying to extract the points from that path so i would be able to store it in the array. What getPointAtLength does actually?I read it supposed to return x,y coordinates in user space. can i use this to get the points from my path? thanks for the help Yahoo! Groups Sponsor ~-- $4.98 domain names from Yahoo!. Register anything. http://us.click.yahoo.com/Q7_YsB/neXJAA/yQLSAA/1U_rlB/TM ~- - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: Help needed - calculating path
Hi,
I'ved been going through your example and really would like to thank
you first is helping me.
i'm trying to use the example you gave into the program that i have
currently.since i need to pass the nodes and edges to javascript to
calculate the shortest path and then
send it back to svg to draw the chosen shortest-path.
my questions are ;) :
1. your program does create the node,edges and circle automatically,
if mine just get
from the existing path drawn in svg, do i have to put the nodes in
the array? like
nodes.push(newNode)?the thing i'm concern is could it be done without
the newNode.x
?just straight using mine like newNode = SVGDocument.getElementById
(circle)?
2.what does the var l and var c does actually?
3.still it doesnt work coz i dont think it is able to send the value
from svg to the script and back to svg.
i tried to do it here.. but still dont know what relevent l and c is.
i'ved inserted my prog here with some Q within it.
thanks for helping me and do appreciate feedback on this.
?xml version=1.0?
!DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.0//EN
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd;
svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' onload='Init(evt)'
script xlink:href=dijkstra.js/
scriptdoc![CDATA[
var SVGDocument = null;
var SVGRoot = null;
var svgns = 'http://www.w3.org/2000/svg';
var xlinkns = 'http://www.w3.org/1999/xlink';
function Init(evt)
{
var SVGDocument = evt.target.ownerDocument;
var SVGRoot = SVGDocument.documentElement;
var allPath= SVGDocument.getElementsByTagNameNS
(svgns, 'path');
var NUMBER_EDGES = allPath.length;
alert(edges +NUMBER_EDGES);
//var nodes = new Array();
};
var NUMBER_NODES = 3;
alert(nodes +NUMBER_NODES);
//
***
// Initialize an adjacency matrix
var adjacencyMatrix = new Array(NUMBER_NODES);
for (var i = 0; i NUMBER_NODES; i++)
{
adjacencyMatrix[i] = new Array(NUMBER_NODES);
for (var j = 0; j NUMBER_NODES; j++)
{
adjacencyMatrix[i][j] = Infinity;
}
}
//
***
//calculating edges
//calculate edges and add them to the document
for (var j = 0; j NUMBER_EDGES; j++) {
var from = j % NUMBER_NODES;
var min = Infinity;
var to = from;
for (var i = 0; i NUMBER_NODES; i++) {
var eachPath = allPath.item(i);
eachPath.setAttributeNS(null, 'stroke', 'blue');
if (from != i adjacencyMatrix[from][i] == Infinity) {
var distance = Math.round(eachPath.getTotalLength());
alert(Distance +distance);
if (distance min) {
min = distance;
to = i;
}
}
}
adjacencyMatrix[from][to] = min;
adjacencyMatrix[to][from] = min;
//add newNode here?
var l = SVGDocument.createElementNS
(SVG_NAMESPACE_URI, line);
if (to from) {
id += String(to) + from;
} else {
id += String(from) + to;
}
l.setAttributeNS(null, id, id);
l.setAttributeNS(null, x1, nodes[from].x);
//l.setAttributeNS(null, path , nodes[from]); this way??
l.setAttributeNS(null, y1, nodes[from].y);
l.setAttributeNS(null, x2, nodes[to].x);
l.setAttributeNS(null, y2, nodes[to].y);
SVGDocument.documentElement.appendChild(l);
}
//add point for the nodes
for(var i=0;i NUMBER_NODES; i++) {
var c = SVGDocument.createElementNS
(SVG_NAMESPACE_URI, circle);
c.setAttributeNS(null, id, c + i);
c.setAttributeNS(null, point,
SVGDocument.getElementsByTagNameNS(svgns, 'c'));
//c.setAttributeNS(null, onclick, setActive( + i + ));
SVGDocument.documentElement.appendChild(c);
}
//
***
//Start with node 0 as active node
var activeNode = 0;
SVGDocument.getElementById(c0).setAttributeNS
(null,class, current);
var shortestPathInfo = shortestPath(adjacencyMatrix,
NUMBER_NODES, 0);
//
***
//Hide the path highlights
function clearPath() {
for (var i = 0; i NUMBER_NODES; i++) {
for (var j = i + 1; j NUMBER_NODES; j++) {
if (adjacencyMatrix[i][j] != Infinity) {
SVGDocument.getElementById(path + i +
j).setAttributeNS(null, class, );
}
}
}
}
[svg-developers] javascript - djikstra
Hi again guys, I'm posting this in related to my shortest-path map project using SVG. Anyone has djikstra coding in javascript i would appreciate having it.I tried looking for it on the web but unsuccessfully. I just need a very simple program that would able me to search for shortest path using djikstra.ure help would very much be appreaciate. Oh,and how do i pass the value-points selected from SVG to javascript to calculate the shortest path? Please email me [EMAIL PROTECTED] cha thanks ppl Yahoo! Groups Sponsor ~-- $4.98 domain names from Yahoo!. Register anything. http://us.click.yahoo.com/Q7_YsB/neXJAA/yQLSAA/1U_rlB/TM ~- - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
