Is it possible to use Raphael to manipulate an embedded SVG image? I used Raphael in the past to draw shapes, but haven't actually seen it being used to manipulate an existing SVG image. If not, is there anything else that allows me to easily change colours, add events, etc. to polygons of an embedded SVG image?
From my experience reading the Raphael.js source, I have to agree with previous posts. The only way I can think of to replace or modify the SVG is by replacing/modifying the markup/DOM itself.
All I want to add in my answer is a short, general explanation of why this is so. Raphael is designed as an SVG/VML generator. That is, Raphael makes JavaScript objects and appends their corresponding SVG/VML markup to the DOM as they are made. The objects have lots of additional properties that make them work within the Raphael framework.
It may be possible to write a plugin that can construct a Raphael object around an SVG element by reading its properties, but, I suspect that such an object may not have all the information it needs to coexist with the other Raphael objects. Certainly, no such parsing/reconstruction functionality currently exists.
Funny, yesterday I found the glitchsvgicons page doing that.
Although in a very primitive way, just using a regex replace of parts.
It can be hint, though: apparently you can use good old search/replace of text parts on SVG icons. But it is more prone to issues than using a real Dom tree...
Related
I want to include this embedded-SVG-Object as an interactive web element inside my web app.
Within this whole svg, these (red)marked overlay-ed objects will communicate through ajax calling to a separate application,which will decide their state(change of position or color) in runtime.
As a novice in svg, need help to determine how can I build this SVG object, for my specific purpose. Found inline SVG better among others. Any easier handy useful tool idea or online platform to draw this SVG object, would be really a great help.
All elements of an SVG are loaded into the DOM, so you can manipulate a loaded SVG through javascript or you could use a library to help you with that, based on my personal preference, I would recommend looking at something like SVG.JS wich lets you easily build/manipulate svg images through javascript.
I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.
Can it be possible to use Raphael js with svg web and svg core (original SVG API), so that I can get the benefit of all available features? I tried to load them together, but nothing would happen. Perhaps they overwrite each other's functionalities.
More precisely, once again my question is can I apply Raphael js along with svgweb on a single SVG.
I tried combining SVG libraries , the main problem is that they use their own canvas so one will always be on top of the other.
I suppose they wouldn't just conflict with each other, but those libraries are also quite big so that's a lot of stuff to download for your visitors. Also think of the added burden for the browser which has to interpret all of the libs and hold them in memory, potentially making the browsing experience less snappy.
What exactly are you trying to achieve that can't be done with a single one of those libs?
1.) I found a canvas API called EaselJS, it does an amazing job of creating a display list for each elements you draw. They essentially become individually recognizable objects on the canvas (on one single canvas)
2.) Then I saw on http://simonsarris.com/ about this tutorial that can do drag and drop, it makes use of a hidden canvas concept for selection.
3.) And the third approach, a working approach, http://www.lucidchart.com/ , which is exactly what I'm trying to achieve, basically have every single shape on a different canvas, and use to position them. There's a huge amount of canvas.
The question is, what is the easiest way to achieve interactive network diagram as seen on http://www.lucidchart.com/
A side question is, is it better to get text input through positioning on canvas or using multiple canvas (one for rendering text) as in LucidChart
I'm the person who made the tutorials in 2. There's a lot going on here, so I'll try to explain a bit.
I use a hidden canvas for selection simply because it is easy to learn and will work for ANY kind of object (text, complex paths, rectangles, semi-transparent images). In the real diagramming library that I am writing, I don't do anything of the sort, instead I use a lot of math to determine selection. The hidden-canvas method is fine for less than 1000 objects, but eventually performance starts to suffer.
Lucidchart actually uses more than one canvas per object. And it doesn't just have them in memory, they are all there the DOM. This is an organizational choice on their part, a pretty weird one in my opinion. SVG might have made their work a lot easier if thats what they are going to do, as if seems they are doing a lot of footwork just to be able to emulate how SVG works a bit. There aren't too many good reasons to have so many canvases in the DOM if you can avoid it.
It seems to me that the advantage of them doing it that way is that if they have 10,000 objects, when you click, you only have to look at the one (small) canvas that is clicked for selection testing, instead of the entire canvas. So they did it to make their selection code a little shorter. I'd much rather only have one canvas in the DOM; their way seems needlessly messy. The point of canvas is to have a fast rendering surface instead of a thousand divs representing objects. But they just made a thousand canvases.
Anyway, to answer your question, the "easiest" way to achieve interactive network diagrams like lucidchart is to either use a library or use SVG (or an SVG library). Unfortunately there aren't too many yet. Getting all the functionality yourself in Canvas is hard but certainly doable, and will afford you better performance than SVG, especially if you plan on having more than 5,000 objects in your diagrams. Starting with EaselJS for now isn't too bad of an idea, though you'll probably find yourself modifying more and more of it as you get deeper into your project.
I am making one such interactive canvas diagramming library for Northwoods Software, but it won't be done for a few more months.
To answer the question that is sort-of in your title: The fastest method of doing interactiveness such as hit-testing is using math. Any high-performance canvas library with the features to support a lot of different types of objects will end up implementing functions like getNearestIntersectionPoint, getIntersectionsOnRect, pathContainsPoint, and so on.
As for your side question, it is my opinion that creating a text field on top of the canvas when a user wants to change text and then destroying it when the user is done entering text is the most intuitive-feeling way to get text input. Of course you need to make sure the field is positioned correctly over the text you are editing and that the font and font sizes are the same for a consistent feel.
Best of luck with your project. Let me know how it goes.
Using SVG (and maybe libraries as Raphael)!!
Then any element can receive mouse events.
I am creating a dynamic, interactive network diagram with php, javascript and either Canvas or SVG
However, with canvas, I don't know how to make each object selectable. i don't want to use the hidden canvas and to detect if a mouse is on an object, because I will have lots of intersecting objects and having lots of layers of canvas will be messy.
I don't know anything about SVG.
Would SVG serves the purpose better? or what is a canvas solution to this.
One advantage of SVG is that it has concrete DOM objects representing the shapes in the drawing, so you automatically get a lot of mouse event handling and event bubbling.
Alternatively, you could use EaselJS, which provides a pretty robust display-list, freeing you from managing hidden canvases.
There are some projects for building diagrams and graphics already. You could try Raphaël which is svg based, so it should be ie compatible as well.
I assume by "the hidden canvas" you mean my tutorial. It will still work with multiple objects and multiple layers, you just need to paint them in the proper z-order.
There are of course much faster (but more sophisticated) ways.
If you don't want to deal with it, SVG has all the object selection built in. Give Raphael a try as Zlatev suggests. If the performance gets too bad (Too many objects) you will have to switch to canvas, so it really depends on your number of nodes/links in your diagrams.
You will have to take care of sending data to your server (in whatever way you prefer) yourself though. There's nothing built into SVG/Canvas/Raphael that will do it for you.