Search the web
Sign In
New User? Sign Up
svg-developers · SVG Developers
? Already a member? Sign in to Yahoo!

Yahoo! Groups Tips

Did you know...
Real people. Real stories. See how Yahoo! Groups impacts members worldwide.

Best of Y! Groups

   Check them out and nominate your group.
Click here for the latest updates on Groups Message search

Messages

  Messages Help
Advanced
animating a <path> element   Topic List   < Prev Topic  |  Next Topic >
Reply < Prev Message  | 
I created simple black circle using inkscape. I am trying to move this black
circle along the x-axis for a beginner's tutorial I am writing. I have
encountered an ugly problem. Inkscape created a <path> element for my circle
rather than a <circle> element. I cannot figure out how to move a <path>
element in the same way that I can a <circle>

With a <circle> element, I can change its svgCx attribute (cx). There is no
such attribute for a <path> element.

Is there a way to wrap the <path> element with something else that has an
svgX or svgCx attribute that I can manipulate?

tks


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




Tue Dec 15, 2009 3:44 pm

bryanbryanb
Offline Offline
Send Email Send Email

< Prev Message  | 
Expand Messages Author Sort by Date

I created simple black circle using inkscape. I am trying to move this black circle along the x-axis for a beginner's tutorial I am writing. I have encountered...
Bryan Berry
bryanbryanb
Offline Send Email
Dec 15, 2009
4:04 pm

For more info see: http://www.w3.org/TR/SVG/coords.html Jake ... [Non-text portions of this message have been removed]...
Jake B
otakuj462
Offline Send Email
Dec 15, 2009
5:38 pm

Hi Bryan, Rather than manipulate cx and cy, you could simply transform the path using SVG transformations. Assuming the circle has an attribute of the form ...
Jake B
otakuj462
Offline Send Email
Dec 15, 2009
5:48 pm

... you animate the "d" attribute. So long as it has the same number of points, it's trivial to do. Although in writing tutorials I tend to write the examples...
Charles McCathieNevile
charlesmccn
Offline Send Email
Dec 15, 2009
5:51 pm

Tks for the great advice folks I wil let you know when the tutorial is done On Tue, Dec 15, 2009 at 11:14 PM, Charles McCathieNevile ... [Non-text portions of...
Bryan Berry
bryanbryanb
Offline Send Email
Dec 16, 2009
3:08 am

chaals for being dense, but what is the easiest way to access this attribute using JavaScript. I have been trying SVGGElment.attributes.getNamedItem('d') and...
Bryan Berry
bryanbryanb
Offline Send Email
Dec 16, 2009
7:26 am

or it presume it is translate, rotate and other transforms that manipulate 'd'? ... [Non-text portions of this message have been removed]...
Bryan Berry
bryanbryanb
Offline Send Email
Dec 16, 2009
7:35 am

Hi Bryan, Using regular DOM won't work. You'll need to use SVG DOM. The DOM interfaces you'll need to use can be found here: ...
Jake Beard
otakuj462
Offline Send Email
Dec 16, 2009
8:04 am

... Adding a transform="translate(x,y)" is much simpler than modifying every part of a path. I'm surprised that no one has mentioned the obvious way of...
Erik Dahlstrom
erida539
Offline Send Email
Dec 16, 2009
9:09 am

Using SMIL did occur to me, but sadly my app needs to run on webkit-based browsers ... [Non-text portions of this message have been removed]...
Bryan Berry
bryanbryanb
Offline Send Email
Dec 16, 2009
9:17 am

... And they still don't have animation? I thought they did that ages ago :( cheers Chaals ... -- Charles McCathieNevile Opera Software, Standards Group je...
Charles McCathieNevile
charlesmccn
Offline Send Email
Dec 16, 2009
9:35 am

On Wed, 16 Dec 2009 10:35:00 +0100, Charles McCathieNevile ... Try the examples I linked to, they work in my webkit clone anyway (Epiphany-webkit). For...
Erik Dahlstrom
erida539
Offline Send Email
Dec 16, 2009
10:32 am

... Oh. As Erik sys, if you just want to move the path without changing it's form, than use a transform attribute - if you want to change the path, you can do...
Charles McCathieNevile
charlesmccn
Offline Send Email
Dec 16, 2009
9:35 am

On Wed, 16 Dec 2009 10:30:07 +0100, Charles McCathieNevile ... s/animateMotion/animate/ /ed -- Erik Dahlstrom, Core Technology Developer, Opera Software ...
Erik Dahlstrom
erida539
Offline Send Email
Dec 16, 2009
10:26 am

For an example, take a look at http://srufaculty.sru.edu/david.dailey/svg/newstuff/path10.svg as discussed in ...
ddailey
ddailey@...
Send Email
Dec 15, 2009
11:52 pm

... Chaals, normally I would agree with you but I want to demonstrate the workflow of creating images in inkscape and then animating them with JavaScript. I...
Bryan Berry
bryanbryanb
Offline Send Email
Dec 16, 2009
3:03 am

I too am in a state of awe of our new Inkscape overlords. One workaround is to enter a circle manually using the xml editor. Understandably you might get some...
Mark T
markstestacc...
Offline Send Email
Dec 17, 2009
7:06 am
Advanced

Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Guidelines - Help