Example SVGs by Brian Lukis – Used with author’s permission
[This Code Is Outdated, Click Here To View The Most Recent Updates]
This has been kicking around for a while. It is an extension of the path loader I posted previously.
1 2 3 4 | mySVG_XML:XML = new XML('<svg... </svg>'); //Load SVG XML and convert it to an XML object svgViewer.xml = mySVG_XML; //Load XML into SVG viewer ... <svg:SVGViewer id="svgViewer"/> |
- Paths
- Clip Paths (Masking)
- Definitions
- Symbols
- Use
- Groups
- Images (Embedded)
- Lines
- Rectangles
- Polygons
It also supports attribute inheritance from parent to child nodes.
As time permits, I plan to document and clean up the code.
Hi James, this is great stuff, I used your older SVG parser for my vectors in papervision project. You can take a look at it here.
Thank you for sharing you code!
cheers,
Mark
good work and thanks for sharing it
i ran into a small problem with svg parsing and was able to fix it. i thought i would share it here.
when there are more than one ‘moveTo’ in a single path, (as in the given example path), only the first one was detected. The subsequent ‘M’s resulted in a NaN value for the parameters of ‘lineTo’ and hence distortions in the rendering.
it can be fixed with an additional M in the second replace call of the SvgPath::splitPathElements method.
change:
elements = elements.replace(/([ACSLHVQT])/sig,”,$1,”);
to:
elements = elements.replace(/([ACSLHVQTM])/sig,”,$1,”);
thanks once again,
ghosh
hi, thanks for all this is stuf for ecliptical arc in Pth Node
private function ellipticalArc(rx:Number, ry:Number, xAxisRotation:Number, largeArcFlag:Number,
sweepFlag:Number, x:Number, y:Number, isAbs:Boolean):void {
if (!isAbs) {
x += this.currentX ;
y += this.currentY;
}
var arc = computeArc(this.currentX,this.currentY,rx,ry,xAxisRotation,largeArcFlag,sweepFlag,x,y);
var k = 8;
var ad = MathUtils.Angle2Rad(-arc.extent/2);
var angleDelta = ad / (k/2);
var xRadius = rx;
var yRadius = ry;
var xCtrlDist = xRadius/Math.cos(angleDelta/2);
var yCtrlDist = yRadius/Math.cos(angleDelta/2);
var rdx, rdy, ax, ay;
var angle =MathUtils.Angle2Rad(-arc.start);
for (var i = 0; i 1) {
rx = Math.sqrt(radiiCheck) * rx;
ry = Math.sqrt(radiiCheck) * ry;
Prx = rx * rx;
Pry = ry * ry;
}
var sign = (largeArcFlag == sweepFlag) ? -1 : 1;
var sq = ((Prx * Pry) – (Prx * Py1) – (Pry * Px1)) / ((Prx * Py1) + (Pry * Px1));
sq = (sq 0) {
angleExtent -= 360.0;
} else if (sweepFlag && angleExtent
Hey rado,
Thank you for contributing your code.
Unfortunately, a portion of it was cut off.
Would you mind sending it using the contact form?
The email address you entered is being returned as invalid.
Regards,
James
Hey James, this is amazing I think it works great for the most part, I am just wondering if you plan to support ellipses, round rectangles(I think these all use arc) etc…
that stinks that is was cut off and no valid email
I wonder if the Primitives Explorer might have the solution if you are looking for one http://www.flexibleexperiments.com/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html
was the truncated post above part of the answer?
Great work
Hey James why remove my post, I was hoping to find out more about the ellipse support, are you looking to add this at some time?
Oops nevermind once I made another post I see my last one sorry disregard this one and the last one about removing my post
James have you looked at the eliptical arc code from the degrafa project? I am going to mess with it to see if I can get it to work with your code.
Thanks for the great work and example.
I am trying to have a test button to modify the color of a layer with an id. However I can not seem to get it to work. At the moment I am just hard coding it all to get a working example.
Any help would be much appreciated.
Got it working. Excellent work. Thanks!
Using event.target.startDrag() I am able to move layers around in the SVG image. Is there a way I can do a hover over the layer and fire a function? I have tried many events and I always get an error ‘ no default value’ – I am sure I am doing something wrong.
Thanks
Hi,
I had pulled the source code earlier by right-clicking on the example and it used to work fine. And then I checked out the latest source code from svn and I am having problems with it. I have an svg with a bunch of rectangles, some with a matrix transformation. It used to work fine earlier, but now I am seeing that the rotation does not take place from the center of the rectangle, rather at some arbitrary point. Can you please take a look at it?
Here is the svg I am using (This renders fine when I try it on Firefox)
The svg I pasted did not appear in the comment. You can see the svg here: http://bigosmallm.com/svg/rectangles.svg
thanks,
Om
SVG: http://bigosmallm.com/svg/rectangles.svg
hey, i have used your text rendering update for svg runtime component an able to load the images at runtime but i need to resize the loaded svg image to a particular value is it possible to resize the component. i have tried to scale the component but it’s not working shower some light over it
Hi omkar,
You should be able to set scale, scaleX, or scaleY in the Flex component.
Are you using the newest version from the Subversion repository?
The source code on this page is old.
James
i am able to scale and also able to set scalex and scaley but this scale property is static i.e., we will assign some value to it at runtime or compile time ( iam able to do that ) but at runtime when the svg image changes scale value does not fit to the previous scale value ,
I want image like functionality when we set a value for the scaling that scale value must be for all images that will be loaded at runtime (irrespective of the svg loaded)
yes iam using the newest verion from SVN
Hi omkar,
The best solution I can offer you right now is to listen for SvgEvent.SVG_LOAD event and set the scale value again. I am in the process of merging the SVG Viewer with two sister projects. There will not be any updates until this is completed.
James
[...] Flex Runtime SVG Component che si prefigge il compito di effettuare il parsing di un file SVG, che ricordiamo essere in formato XML. Per il momento non credo supporti ancora i file compressi e da questo punto di vista penso che sia un salasso caricare un’immagine complessa. Il progetto SVG-Viewer รจ raggiungibile su google code http://code.google.com/p/svg-viewer/ [...]
Hello james ,
i’m new with svg libraries , can u give some example of event handling with svg images in flex enviornment .
Hi James,
Your library is a really great tool! I could display some SVG symbols on a Flex map tool, thanks for sharing it since there’s no support for SVG with Flex 3!
Now I’m interested in rendering from SVG and tried to get the last version from http://code.google.com/p/svgweb/?redir=1 but I got lost: it seams to be a javascript tool and not a flex tool anymore?!
I initially found the library there (http://labs.zavoo.com/content/flex/SvgViewer/srcview/index.html), but did not really understand where does the official repository stand.
Thanks in advance!
Martin
Sorry, I was saying I’d like to render text appearing in SVG, but I wrote text as it appear in SVG files, so it’s not rendered in the browser
hello,author.
I use this,but i found than it work broken in the image targer.
i hope you can help me to solve it.thanks.
Hey – great work!!! Whats license like for this? Can I use it for my projects?