Selecting an manipulating an existing element with jQuery SVG - javascript

All of the examples on jQuery SVG's website seem to be geared toward building an SVG object in javascript and building new elements within it. It doesn't talk much about manipulating existing markup.
PROBLEM:
I have an existing SVG object with events wired up to javascript functions. I want to take the event target (in this case, an SVG Path element) and .animate() it using jQuery SVG.
However, simply $(myElement).animate() doesn't seem to work. The issue at hand seems to be that $(myElement) doesn't accept SVG objet arguments, or something.
Oddly the animate completion callback seems to work, but NO animation type I try to do with it works at all.
I'm not convinced it's properly recognizing the event target as an SVG <path>.
Even directly manipulating the attributes of the path don't seem to work (using .attr())
I know factually that myElement is a valid SVG path because if I use basic JS DOM techniques like changing the class with .setAttribute(), it works fine.

Probably this one could help you out: http://keith-wood.name/svgRef.html#support
Just an example taken from this page:
$(shape).animate({svgFill: 'lightblue'}, 2000);

Related

how to make complex and interactive SVG object using inline SVG

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.

Using SVG's getCTM with getElementById

I have dynamically generated SVG, and I need to find the current coordinates of one of the elements. According to the SVG documentation, this can be done with the getCMT() function. I have not been able to get this to work in JavaScript. Here is an example code fragment:
thing = document.getElementById("#bx" + myState.myId);
matrix = thing.getCTM();
I correctly select the SVG element, which is a 'g' element, so it has a transform matrix. When I try to get the matrix, it returns a 'null'. This is a simple task, so it is very puzzling that it does not work. I've spent some time looking for examples, but they all seem to use static SVG directly loaded in HTML. What am I missing?
I've also tried this with getBBox() and had the same result. I'm using the current FireFox release.
I found out what the problem was. I was using getElementById in conjunction with the visibility attribute. I was setting visibility to hidden in the root of the SVG structure, and then setting the visibility attribute to visible in a nested g element. The getElementById function returns null when intermediate nodes are not displayed. Calling getElementbyId before changing the visibility made things work.
Here is a reference to where I found this out: https://bugzilla.mozilla.org/show_bug.cgi?id=756985
The specifics have to do with whether the SVG is attached or not. If it is not attached then everything must be visible. If it is attached then it is possible to use hidden/visible.
Thanks to those who responded. In FireFox, it didn't make any difference if there was a "#" at the start of the getElementId argument, but it's good to know the correct syntax. Thanks.

Converting html to svg using javascript/jquery

Is there a way to convert an html snippet to svg?
for example:
<b>This is bolded</b>
I want to make an svg document with the html snippet above... is this possible?
I would suggest that you should edit your question to describe the actual use case and goal you are trying to achieve, as directly implementing what you seem to ask for is hard (see below). Some combination of SVG-in-XHTML or XHTML-in-SVG (for example, this) are far more likely to give you want you want.
We can only help you achieve your goals if you tell us your goals instead of asking us help you to solve a particular implementation you thought of to achieve them.
As I mentioned above, There is not an easy way to do what you suggest. In particular, HTML has automatic line wrapping, floating and general positioning concepts, as well as explicit z-indexing, that are not present in SVG.
The following madness would mostly work, however:
Create an iframe or div on your page and set the HTML to your snippet.
Loop through every element and convert wrap a margin:0;padding:0;border:0 span around every word in the text.
Loop through every element (including your created spans) and calculate the absolute position on the page. (jQuery has a method to do this, or you could use the combination of offsetLeft/offsetTop and offsetParent to walk up the positioned tree and calculate it yourself.)
Calculate the equivalent z-index for each element by walking up the tree and using the getComputedStyle() and creating a chain of the local z-index.
For each of these elements, create the equivalent element in SVG with absolute positioning.
Re-sort the SVG elements you created by the hierarchy of z-indices.
Check this html to SVG demo, (using HiQPDF, a commercial product). You can find there code samples for C# and VB.NET. You can convert an URL or a HTML code snippet as you requested.
There are JS libs, that convert html to canvas:
http://html2canvas.hertzen.com/
But until now, I did not found something similar for svg.

Use Raphael to manipulate SVG

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...

What's the principle inside this js tree?

http://jsbin.com/idala
How is it implemented?
The creator used javascript prototype feature (not the popular Prototype framework) to create a Christmas Tree class named chrisTree.
There are methods implemented to perform the 'drawing' of the tree as well as the animation by:
Dynamically creating DOM elements to represent the trees
Manipulation of CSS styles
Using setTimeout method for animation effect triggering
etc. etc.
Nice work!
Javascript making use of x, y coordinates, arrays and bit of css. You got to analyze it closely to get an idea of how it works. Of course you should have good understanding of javascript. :)
Creating div elements which are absolutely positioned so that it appears as a tree.
Settimeout used to light up divs
Colors are stored in an array
You can view the code using the following link and understand what is being done
http://jsbin.com/idala/edit

Categories