We Keep Coding

Create SVG elements from collection without explicitly setting coordinates

I'm new to SVG, so I don't know if I'm missing something obvious and simple.
In every lesson on creating SVG elements, x and y coordinates must be explicitly set for element to be drawn. But is there a way for a browser to draw one svg shape right next to another, without explicitly specifying coordinates, like DOM does when you write <div>content1</div><div>content2</div>?
What I want is:
Having a collection of data for elements (let's say, they are all rectangles with only width and height specified), is there a way to draw all of them sequentially in a row (horizontally)? I don't want to manually set coordinates for each element, just call foreach element in array and expect browser to figure out coordinates from each element's width property.
Is this achievable only with some script that dynamically calculates bounding box for each element or there is some simpler way?

How do you change the sprite position in a animation? KineticJs

I the speech bubbles to be next to the person who says them but how do I change the position? I don't want to have any more animations for that, is it possible?
link: http://www.tlu.ee/~kristo93/Eritamine%20-%20puhas/p6hi.html
for example the next tere would be positioned next to the students.

There is always an X-Y co-ordinate of any group or element you create using the kinetic.js
You just need to manipulate X-Y property of the group containing your speech cloud.
suppose your reference to that cloud group is called cloudGroup then set the X and Y property using the method as follows:
cloudGroup.setX(100);
cloudGroup.setY(100);
So just insert anything instead of 100, which suits the position you desire.

Is there a way to check if specific point (X,Y) is in the SVG element?

What I need to do is to understand if mouse leaves SVG object (path, i.e it is not a rectangular - can't use just offset, not a circular - can't use radius and center position, etc. ). I can not use mouse leave/enter events because I have a pointer for mouse that is always above all elements. Obviously I also can't just use elementFromPoint - because it gives the top layer element.
So the question:
Is there a way to understand if coordinates (X,Y) are in the specific element $("#element").
UPD:
I uploaded my current code to my website http://pekap.co/example/
I didn't create jsfiddle because I have SVG object to ebmed.
There you can find my JS, svg object I use, etc.
If you go to the svg object it changes its color and pointer appears (orange circle). The goal is to change color of the SVG area whenever we leave it/ enter it and display orange circle under mouse only inside SVG area.
Whereas currently I can accomplish on one of goals (either one with different code)
UPD 2.
Erik Dahlström gave almost perfect solution for me: set pointer-events to none in CSS. I will go for this now, however to make my day perfect it would be great if there was a way to detect when any part of circle is out of the SVG area.

I'm not sure I follow what you mean, the pointer is the little circle that follows the mouse?
If so, then just make that circle have pointer-events: none and it will be "transparent" to mouse events. Note that webkit/safari/chrome/blink doesn't yet support mouseenter and mouseleave so you'll likely need some scriptbased workaround (not sure if D3 does this already).
It should also be possible to do a solution based on using a CSS :hover rule on the path element. Set some property to some value on hover, and then check with getComputedStyle what the property is currently set to on the path element.

My suggestion would be to to create a image map of the area, its a lot of work but this seems to be what you need: http://jsfiddle.net/sb9j7/
<area shape="poly" name="dip" coords="253,102, 277,100, 280,105, 290,107, 295,111, 304,130, 290,140, 287,147, 240,157, 238,159, 227,153, 203,146, 198,125, 200,116, 214,102, 231,102" href="#">
this fiddle is from image mapster

Raphael JS move/rotate group of drawings as one?

I have a little tool that draws up a grid of circles(representing holes) that allows the user to add text and lines to these circles. Right now I have it set up so if the user clicks on any of the holes then wherever the hole is moved so is every other element on the Paper object. What I am trying to implement next is the ability to rotate everything as one object. I realize that for this to work that I need to know the central point of all the objects, which I can easily get.
What I want to know is should I draw everything on another object. This object will act as another Paper object of sorts, but will only serve for movement and rotation. Any click events on the holes drawn on the object will be passed on to the parent (i.e. the pseudo-paper object everything is drawn on). Is this possible? If so how would I draw everything onto say, a rectangle? And if not what would be the best way to go implementing it?

What you need is a Set. You create it, push objects to it, and then treat it as an entire group, in your case by applying transformations.
Example:
var elements = paper.set();
if (!view.text) {
view.text = App.R.text(0, 0, this.value);
view.text.attr({
'font-size': font_size,
});
elements.push(view.text);
}
elements.transform('something');
Note that you can also bind events to this entire set.

How do I select a drawing on canvas?

I wish to create a click-able object on a tag with javascript/jQuery.
This obviously dosen't work.
var cow = new Object();
cow = ctx.drawImage(tile,cursorH,cursorV);
$(cow).click{function(){
alert('You clicked a cow!');
});

The solution is simple, but requires some groundwork be laid. First, you'll need to keep track of the "objects" you draw on the canvas. Perhaps create your own object class that keeps track of position and size. Secondly you override the onclick event for the canvas and perform a hit test on all your visible objects. The ones that are located under your cursor at the time of the click were clicked upon.

I don't think you can do it "right out of the box." Check out Fabric.js (demo) though, I believe it has support for drawing selectable objects to the canvas.