[svg-developers] Use SVG, not VML
Remember the very dark days of a few years ago? This makes me feel all warm and fuzzy http://blogs.msdn.com/b/ie/archive/2011/12/07/moving-to-standards-based-web-graphics-in-ie10.aspx - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: normalizedPathSegList
Are you looking for:
http://www.w3.org/TR/SVG/implnote.html#ArcParameterizationAlternatives
If it is then a conversion routine written in JAVA is:
ExtendedGeneralPath.java
in the Batik source. I wrote one in JavaScript based on it.
Bruce
--- In svg-developers@yahoogroups.com, yannick.bochatay@... wrote:
Hi,
I try to write a function to update points of a path from a transformation
matrix. It's all ok except for elliptical arcs :
I can't find the correct coefficients for r1 r2 and angle.
Is it simplier to approximate arcs with bezier curves, like the
normalizedPathSegList property would do (but not implemented yet) ?
I wrote an example at http://jsfiddle.net/s32LX/, but I've put the code below
anyway.
Best regards,
Yannick Bochatay
http://ybochatay.fr
SVGPathElement.prototype.mtx2attrs = function(mtx) {
var seg,letter,point,pt={},
angle = Math.atan2(mtx.b, mtx.a),
svg = this.ownerSVGElement,
list = this.pathSegList,
i=0, N = list.numberOfItems;
/* this.rel2abs(); function that change relative paths to absolute */
for (;iN;i++) {
seg = list.getItem(i);
letter = seg.pathSegTypeAsLetter;
['','1','2'].forEach(function(ind) {
if (seg['x'+ind] === undefined seg['y'+ind] === undefined) {
return; }
if (seg['x'+ind] !== undefined) { pt['x'+ind] = seg['x'+ind]; }
if (seg['y'+ind] !== undefined) { pt['y'+ind] = seg['y'+ind]; }
var point = svg.createSVGPoint();
point.x = pt['x'+ind]; point.y = pt['y'+ind];
point = point.matrixTransform(mtx);
seg['x'+ind] = point.x;
seg['y'+ind] = point.y;
});
if (angle!==0 (letter === 'H' || letter === 'V')) {
this.pathSegList.replaceItem(
this.createSVGPathSegLinetoAbs(seg.x,seg.y) , i );
}
else if (letter === 'A') {
/*what to do in that case ??
seg.r1 = ?
seg.r2 = ?
seg.angle+= angle ?
*/
}
}
};
-
To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com
-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/
* Your email settings:
Individual Email | Traditional
* To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
* To change settings via email:
svg-developers-dig...@yahoogroups.com
svg-developers-fullfeatu...@yahoogroups.com
* To unsubscribe from this group, send an email to:
svg-developers-unsubscr...@yahoogroups.com
* Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
Re: [svg-developers] Re: CSS, SVG and Building Scalable Web Sites
On Wed, 11 May 2011 20:41:05 +0100, jamesd jcdeeri...@yahoo.com wrote: You forgot the opera browser in the teaser :-) confirming Opera displays the page just fine. (I work for Opera, by the way!) Did not forget Opera. As you know Opera is in the middle of replacing its engine. While they are in the pit area gearing up for Opera 12 I await the results. Opera 11 was disastrous, but hopefully all will be forgiven and Opera 12 will once again be at the top of the list. It would be really helpful if you could let me have a list of which bits of the SVG you want to use are supported badly by Opera 11, so I can try to make sure that they're addressed by the next release, if you wouldn't mind. (Onlist or off) Thanks Bruce - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] IE 9 RC and Carto.net
IE 9 RC is out (http://www.beatutyoftheweb.com) and it seems to play much better with the widgets on Carto.net Testing is ongoing... - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: IE 9 RC and Carto.net
More info at: http://blogs.msdn.com/b/ie/ --- In svg-developers@yahoogroups.com, bruce bruce.rindahl@... wrote: IE 9 RC is out (http://www.beatutyoftheweb.com) and it seems to play much better with the widgets on Carto.net Testing is ongoing... - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: US Map with US Census data
Anything by Edward R. Tufte. Buy his books - they are worth it. Enjoy! Bruce --- In svg-developers@yahoogroups.com, ddailey ddai...@... wrote: best, David - PS I'll need to learn a bit of an introduction to the cartographer's art and science, since I suspect I'll be in over my head next semester. Tips like this are sought! - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: fun but buggy -- gears
; repeatCount=indefinite / /circle /g g transform=rotate(180) animateMotion begin=0s dur=dur; path=largeCirCW; repeatCount=indefinite / circle x=0 y=0 r=1 fill=yellow animateMotion begin=0s dur=dur; path=largeCirCCW; repeatCount=indefinite / /circle /g ellipse cx=0 cy=0 rx=50 ry=100 fill=none stroke=red stroke-width=0.2 / /svg --- Bruce - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: highway construction
Love it! But what if there are two cars and they cross under and over a bridge at the same time? You will need an extra car to make sure it is over the top of the bridge. Bruce --- In svg-developers@yahoogroups.com, israel_eisenberg owlg...@... wrote: Hi David, here is my suggestion: http://owl3d.com/tests/svg-developers/notknot.svg For smooth movement of the car, mpath is a copy of the highway, same d attribute without the internal M jumps. 2 clipped copies of the highway are used as bridges and their opacity is synchronized with the car travel. Do I get an extra credit for this? :) BTW, the Celtic knot is a Tubefy demo in the normalGradient article: http://owl3d.com/svg/tubefy/articles/article3.html#poi Warmest regards, Israel --- In svg-developers@yahoogroups.com, ddailey ddailey@ wrote: In this example: http://srufaculty.sru.edu/david.dailey/svg/notknot2.svg I see the following results: IE/ASV and FF4 agree with me about the timing... Opera seems to synchronize the declarative animation differently between the application of the mask and the vehicles... Safari and Chrome do not seem to activate the animation of the mask. Background story can be seen here: http://srufaculty.sru.edu/david.dailey/svg/knots.html, it leads into the above experiment and to some of the following concerns: Let's limit our consideration to the FF4 and IE+ASV version (since they did what I intended -- not that that is right of course -- I think one could simply change the timing and make it work in Opera instead) 1. I was pleased to be able to simulate a knot using a single path, since the semantics makes sense. My previous forays into the subject (at above link) had various problems associated with both semantics and the size of the DOM. I was also pleased with how a couple of simple re-uses of that path (like some of the vector effects techniques I suppose) suffice to simulate a fill and a texture to the road. 2. The blue car goes under the underpass and over the overpass as it should, though the red car doesn't. This is due to a trick: I gave the bridge magical properties and put the car under its spell. Specifically, the car has a mask applied (as a sort of inverse clipPath -- Doug Schepers says he's opened a WG issue on the issue of inverse clipPaths) based on a subpath* of the road and the mask animates between white and black in a way planned to synchronize with the car's approach to the bridge. The bridge doesn't know that the car is approaching**, it is just synchronized through a common time interval on the SMIL loop. The red car is under the same influence of the mask, but the mask has not been programmed for the red car's arrival. 3. Can anyone think of an easier way to do this? What if the cars are all moving at different speeds that have perhaps been randomized? 4. One could build the road as a series of segments and then have the car leap from segment to segment, and change its stacking order within the DOM as it goes -- but that would be rather script heavy, semantically inaccessible and distinctly inelegant. 5. Is Opera or FF and ASV right on the timing? I hope for the latter simply since I don't want to have to rethink my bridges. cheers David * One can think of subpaths as unioned into a superpath. Vector effects in SVG 1.2 covers a part of this. ** Though it might be nice to be able to determine that without have to calculate it through script or paper and pencil but to expose the animated values. [Non-text portions of this message have been removed] - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: highway construction
Great! I wonder if the multi speed problem can be solved by having separate animations and start one when the previous ones ends i.e. linking. Then the key times go from 0 to 1 and the durations can be speed dependent. Of course when one car passes another all bets are off... Bruce --- In svg-developers@yahoogroups.com, israel_eisenberg owlg...@... wrote: Thanks Bruce, I'm sure you will also love to hear that it was inspired by your carousel code :) http://tech.groups.yahoo.com/group/svg-developers/message/63747 You use display, I use opacity, rest is just synchronizing keyTimes. As for 2 cars, I think what you need is two more bridges and a tighter synchronization: http://owl3d.com/tests/svg-developers/notknot2.svg Yet, it doesn't fill like a comprehensive solution for multi speeds... Regards Israel --- In svg-developers@yahoogroups.com, bruce bruce.rindahl@ wrote: Love it! But what if there are two cars and they cross under and over a bridge at the same time? You will need an extra car to make sure it is over the top of the bridge. Bruce --- In svg-developers@yahoogroups.com, israel_eisenberg owlgems@ wrote: Hi David, here is my suggestion: http://owl3d.com/tests/svg-developers/notknot.svg For smooth movement of the car, mpath is a copy of the highway, same d attribute without the internal M jumps. 2 clipped copies of the highway are used as bridges and their opacity is synchronized with the car travel. Do I get an extra credit for this? :) BTW, the Celtic knot is a Tubefy demo in the normalGradient article: http://owl3d.com/svg/tubefy/articles/article3.html#poi Warmest regards, Israel --- In svg-developers@yahoogroups.com, ddailey ddailey@ wrote: In this example: http://srufaculty.sru.edu/david.dailey/svg/notknot2.svg I see the following results: IE/ASV and FF4 agree with me about the timing... Opera seems to synchronize the declarative animation differently between the application of the mask and the vehicles... Safari and Chrome do not seem to activate the animation of the mask. Background story can be seen here: http://srufaculty.sru.edu/david.dailey/svg/knots.html, it leads into the above experiment and to some of the following concerns: Let's limit our consideration to the FF4 and IE+ASV version (since they did what I intended -- not that that is right of course -- I think one could simply change the timing and make it work in Opera instead) 1. I was pleased to be able to simulate a knot using a single path, since the semantics makes sense. My previous forays into the subject (at above link) had various problems associated with both semantics and the size of the DOM. I was also pleased with how a couple of simple re-uses of that path (like some of the vector effects techniques I suppose) suffice to simulate a fill and a texture to the road. 2. The blue car goes under the underpass and over the overpass as it should, though the red car doesn't. This is due to a trick: I gave the bridge magical properties and put the car under its spell. Specifically, the car has a mask applied (as a sort of inverse clipPath -- Doug Schepers says he's opened a WG issue on the issue of inverse clipPaths) based on a subpath* of the road and the mask animates between white and black in a way planned to synchronize with the car's approach to the bridge. The bridge doesn't know that the car is approaching**, it is just synchronized through a common time interval on the SMIL loop. The red car is under the same influence of the mask, but the mask has not been programmed for the red car's arrival. 3. Can anyone think of an easier way to do this? What if the cars are all moving at different speeds that have perhaps been randomized? 4. One could build the road as a series of segments and then have the car leap from segment to segment, and change its stacking order within the DOM as it goes -- but that would be rather script heavy, semantically inaccessible and distinctly inelegant. 5. Is Opera or FF and ASV right on the timing? I hope for the latter simply since I don't want to have to rethink my bridges. cheers David * One can think of subpaths as unioned into a superpath. Vector effects in SVG 1.2 covers a part of this. ** Though it might be nice to be able to determine that without have to calculate it through script or paper and pencil but to expose the animated values. [Non-text portions of this message have been removed] - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click edit my
[svg-developers] Re: fun but buggy -- gears
David These are interesting examples. I will add another: ?xml version=1.0 standalone=no? svg width=100% height=100% viewBox=-100 -150 200 300 xmlns=http://www.w3.org/2000/svg; g animateTransform attributeName=transform attributeType=XML type=rotate from=0 to=360 begin=0s dur=24s repeatCount=indefinite / circle cx=0 cy=0 r=100 fill=blue / rect x=-10 y=-100 width=20 height=200 fill=gray / rect x=-10 y=-100 width=20 height=200 fill=gray transform=rotate(60)/ rect x=-10 y=-100 width=20 height=200 fill=gray transform=rotate(120)/ /g g transform=translate(0,45) g animateTransform attributeName=transform attributeType=XML type=rotate from=0 to=360 begin=0s dur=12s repeatCount=indefinite / circle cx=0 cy=45 r=10 fill=red / circle cx=0 cy=45 r=10 fill=red transform=rotate(120)/ circle cx=0 cy=45 r=10 fill=red transform=rotate(240)/ line x1=0 y1=0 x2=0 y2=45 stroke-width=6 stroke=black stroke-linecap=round / line x1=0 y1=0 x2=0 y2=45 stroke-width=6 stroke=black stroke-linecap=round transform=rotate(120)/ line x1=0 y1=0 x2=0 y2=45 stroke-width=6 stroke=black stroke-linecap=round transform=rotate(240)/ /g /g /svg This is a quick and dirty version of a roller gear. To see a physical picture of one see: http://lumberjocks.com/projects/23791 All browsers work fine except IE. I haven't tested it with ASV. Enjoy! --- In svg-developers@yahoogroups.com, ddailey ddai...@... wrote: Here are a couple of interesting examples / difficult browser calisthenics: http://granite.sru.edu/~ddailey/svg/animoval3.svg and http://granite.sru.edu/~ddailey/svg/animoval4.svg The first works much as I think it should in Opera, Chrome and IE/ASV. FF4 runs only one of the gears. Safari screws up the stroke's gradient. IE/ASV, though and Opera/Chrome/Safari don't agree about the proper values for animating dashoffset.In IE/ASV, using values=0;24 and values=24;0 respectively for the two animations seems to line up the gear teeth well, whereas for the others I had to do values=12;36 and values=24;0 to keep the teeth from colliding. The second example seems to work well only in IE/ASV and Chrome -- a first for those two to team up in bettering Opera in my experience! ASV and both webkit browsers seem to get the outergear to spin. FF seems to see that there is something there, but stalls before it can make a go of it, and Opera for some odd reason seems to ignore that particular animation. Btw, I rather liked the slighty readjustment that ASV and webkit experience due to the circumference of the ellipse being irrational -- something like it might be expected, I think, in a physical model. At first I was annoyed that I couldn't get the gradient to extend out into the teeth, but then I remembered the r attribute of a radial gradient (.5 by default). I could have varied it but decided not to. It would be fun to make more complex machines sorta like this based on SMIL, but we'd have to figure out which browers are doing it right first I suppose. Do let me know if it is my code of the browsers that are goofy here. cheers David [Non-text portions of this message have been removed] - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: fun but buggy -- gears
It is a pretty crude version but you are welcome to it. I got the idea from a href=http://www.amazon.com/Making-Mechanical-Marvels-Wood-Raymond/dp/0806973587; Making Mechanical Marvels In Wood/a so add that reference too. I like the Reuleaux triangle. Some made a drill bit that rotates off centered using it so it actually drills a square hole except the small corners. I may try a hand at it. Bruce --- In svg-developers@yahoogroups.com, ddailey ddai...@... wrote: Cool, Bruce! It almost seems paradoxical in the way it moves, reminding me a bit of those wooden winding toys. Seems like we'll need a machinery collection somewhere now. Would you mind if I stuck this example (with credit, of course) on a page somewhere? It would be fun to build little components and then let people hook them together sorta like the motors in Phun (http://www.phunland.com/wiki/Home ) BTW the animation of the top thing could save the poor browser a bit of work using animateTransform attributeName=transform attributeType=XML type=rotate from=0 to=60 begin=0s dur=4s repeatCount=indefinite / because of the sixfold symmetry. It seems like the browser might be happier having to only manage 4 seconds of animation (and then having that delightful instant of taking a breath) instead of 24 before starting over. The Reuleaux triangle (http://en.wikipedia.org/wiki/Reuleaux_triangle ) would be another instance. (Someone really should start lacing Wikipedia with SVG animation since the particular animation there is thoroughly icky. Starting with the entry on SVG would be a good start.) It is a good example of why re-inventing the wheel is sometimes a good planetary exercise: sometimes people get too stubborn. cheers David - Original Message - From: bruce To: svg-developers@yahoogroups.com Sent: Wednesday, October 13, 2010 3:08 PM Subject: [svg-developers] Re: fun but buggy -- gears David These are interesting examples. I will add another: ?xml version=1.0 standalone=no? svg width=100% height=100% viewBox=-100 -150 200 300 xmlns=http://www.w3.org/2000/svg; g animateTransform attributeName=transform attributeType=XML type=rotate from=0 to=360 begin=0s dur=24s repeatCount=indefinite / circle cx=0 cy=0 r=100 fill=blue / rect x=-10 y=-100 width=20 height=200 fill=gray / rect x=-10 y=-100 width=20 height=200 fill=gray transform=rotate(60)/ rect x=-10 y=-100 width=20 height=200 fill=gray transform=rotate(120)/ /g g transform=translate(0,45) g animateTransform attributeName=transform attributeType=XML type=rotate from=0 to=360 begin=0s dur=12s repeatCount=indefinite / circle cx=0 cy=45 r=10 fill=red / circle cx=0 cy=45 r=10 fill=red transform=rotate(120)/ circle cx=0 cy=45 r=10 fill=red transform=rotate(240)/ line x1=0 y1=0 x2=0 y2=45 stroke-width=6 stroke=black stroke-linecap=round / line x1=0 y1=0 x2=0 y2=45 stroke-width=6 stroke=black stroke-linecap=round transform=rotate(120)/ line x1=0 y1=0 x2=0 y2=45 stroke-width=6 stroke=black stroke-linecap=round transform=rotate(240)/ /g /g /svg This is a quick and dirty version of a roller gear. To see a physical picture of one see: http://lumberjocks.com/projects/23791 All browsers work fine except IE. I haven't tested it with ASV. Enjoy! --- In svg-developers@yahoogroups.com, ddailey ddailey@ wrote: Here are a couple of interesting examples / difficult browser calisthenics: http://granite.sru.edu/~ddailey/svg/animoval3.svg and http://granite.sru.edu/~ddailey/svg/animoval4.svg The first works much as I think it should in Opera, Chrome and IE/ASV. FF4 runs only one of the gears. Safari screws up the stroke's gradient. IE/ASV, though and Opera/Chrome/Safari don't agree about the proper values for animating dashoffset.In IE/ASV, using values=0;24 and values=24;0 respectively for the two animations seems to line up the gear teeth well, whereas for the others I had to do values=12;36 and values=24;0 to keep the teeth from colliding. The second example seems to work well only in IE/ASV and Chrome -- a first for those two to team up in bettering Opera in my experience! ASV and both webkit browsers seem to get the outergear to spin. FF seems to see that there is something there, but stalls before it can make a go of it, and Opera for some odd reason seems to ignore that particular animation. Btw, I rather liked the slighty readjustment that ASV and webkit experience due to the circumference of the ellipse being irrational -- something like it might be expected, I think, in a physical model. At first I was annoyed that I couldn't get the gradient to extend out into the teeth, but then I remembered the r attribute of a radial gradient (.5 by default). I could have varied it but decided
[svg-developers] Re: fun but buggy -- gears
It is a pretty crude version but you are welcome to it. I got the idea from Making Mechanical Marvels In Wood : http://www.amazon.com/Making-Mechanical-Marvels-Wood-Raymond/dp/0806973587\ so add that reference too. I like the Reuleaux triangle. Some made a drill bit that rotates off centered using it so it actually drills a square hole except the small corners. I may try a hand at it. Bruce --- In svg-developers@yahoogroups.com, ddailey ddai...@... wrote: Cool, Bruce! It almost seems paradoxical in the way it moves, reminding me a bit of those wooden winding toys. Seems like we'll need a machinery collection somewhere now. Would you mind if I stuck this example (with credit, of course) on a page somewhere? It would be fun to build little components and then let people hook them together sorta like the motors in Phun (http://www.phunland.com/wiki/Home ) BTW the animation of the top thing could save the poor browser a bit of work using animateTransform attributeName=transform attributeType=XML type=rotate from=0 to=60 begin=0s dur=4s repeatCount=indefinite / because of the sixfold symmetry. It seems like the browser might be happier having to only manage 4 seconds of animation (and then having that delightful instant of taking a breath) instead of 24 before starting over. The Reuleaux triangle (http://en.wikipedia.org/wiki/Reuleaux_triangle ) would be another instance. (Someone really should start lacing Wikipedia with SVG animation since the particular animation there is thoroughly icky. Starting with the entry on SVG would be a good start.) It is a good example of why re-inventing the wheel is sometimes a good planetary exercise: sometimes people get too stubborn. cheers David - Original Message - From: bruce To: svg-developers@yahoogroups.com Sent: Wednesday, October 13, 2010 3:08 PM Subject: [svg-developers] Re: fun but buggy -- gears David These are interesting examples. I will add another: ?xml version=1.0 standalone=no? svg width=100% height=100% viewBox=-100 -150 200 300 xmlns=http://www.w3.org/2000/svg; g animateTransform attributeName=transform attributeType=XML type=rotate from=0 to=360 begin=0s dur=24s repeatCount=indefinite / circle cx=0 cy=0 r=100 fill=blue / rect x=-10 y=-100 width=20 height=200 fill=gray / rect x=-10 y=-100 width=20 height=200 fill=gray transform=rotate(60)/ rect x=-10 y=-100 width=20 height=200 fill=gray transform=rotate(120)/ /g g transform=translate(0,45) g animateTransform attributeName=transform attributeType=XML type=rotate from=0 to=360 begin=0s dur=12s repeatCount=indefinite / circle cx=0 cy=45 r=10 fill=red / circle cx=0 cy=45 r=10 fill=red transform=rotate(120)/ circle cx=0 cy=45 r=10 fill=red transform=rotate(240)/ line x1=0 y1=0 x2=0 y2=45 stroke-width=6 stroke=black stroke-linecap=round / line x1=0 y1=0 x2=0 y2=45 stroke-width=6 stroke=black stroke-linecap=round transform=rotate(120)/ line x1=0 y1=0 x2=0 y2=45 stroke-width=6 stroke=black stroke-linecap=round transform=rotate(240)/ /g /g /svg This is a quick and dirty version of a roller gear. To see a physical picture of one see: http://lumberjocks.com/projects/23791 All browsers work fine except IE. I haven't tested it with ASV. Enjoy! --- In svg-developers@yahoogroups.com, ddailey ddailey@ wrote: Here are a couple of interesting examples / difficult browser calisthenics: http://granite.sru.edu/~ddailey/svg/animoval3.svg and http://granite.sru.edu/~ddailey/svg/animoval4.svg The first works much as I think it should in Opera, Chrome and IE/ASV. FF4 runs only one of the gears. Safari screws up the stroke's gradient. IE/ASV, though and Opera/Chrome/Safari don't agree about the proper values for animating dashoffset.In IE/ASV, using values=0;24 and values=24;0 respectively for the two animations seems to line up the gear teeth well, whereas for the others I had to do values=12;36 and values=24;0 to keep the teeth from colliding. The second example seems to work well only in IE/ASV and Chrome -- a first for those two to team up in bettering Opera in my experience! ASV and both webkit browsers seem to get the outergear to spin. FF seems to see that there is something there, but stalls before it can make a go of it, and Opera for some odd reason seems to ignore that particular animation. Btw, I rather liked the slighty readjustment that ASV and webkit experience due to the circumference of the ellipse being irrational -- something like it might be expected, I think, in a physical model. At first I was annoyed that I couldn't get the gradient to extend out into the teeth, but then I remembered the r attribute of a radial gradient (.5 by default). I could have varied it but decided
[svg-developers] SVG Open
Sorry I missed the conference. Does anyone want to post the highlights? Thanks! Bruce - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: Drawing Elliptical Arc using Bezier Curve
For #2 (and maybe #3) see: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes --- In svg-developers@yahoogroups.com, tushar0711 tctriv...@... wrote: Hello All, I'm developing basic SVG Viewer using .Net GDI+. I need to draw an Elliptical Arc using SVG Path element. SVG path element has A/a command for elliptical arc which has following parameters x,y = End point of the curve rx,ry = X Radius and Y Radius of the entire ellipse x-axis-rotation = rotation applied to entire ellipse large-arc-flag = flag that determines whether to draw large arc or small arc between given points sweep-flag = flag that determines positive angle direction or negative angle direction starting point of the curve is known Now, on the drawing/rendering side I have couple of options: 1. Drawing elliptical arc using one or more cubic bezier curves 2. Drawing elliptical arc using .Net DrawArc() method 3. Drawing elliptical arc by joining points on the curve using line For No. 1 what need is set of 4 points for each Cubic Bezier curve. If anyone know any methodology/algorithm/formula or any other resource to derived points of the bezier curve from the above given parameters please share. For No. 2 what I need to know is rectangle that is equivalent to bounding box of the entire ellipse, start angle and sweep angle. In order to know the rectangle I need to know the center of the ellipse. If anyone know any method/algorithm/formula to determine center of the ellipse and start angle and sweep angle from above given SVG parameters please share. For No. 3 what I need is simply set of points joining which by line I can draw a curve. I'm not from the mathametics background, please share your knowledge on this or direct me to any web resource where I can read relevant information and formulas. Since this group is very old, this topic may be already discussed. If so, please let me know message number(s). Thanks all Tushar [Non-text portions of this message have been removed] - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
