Well, since someone downvoted this instead of trying to ask for a change, I am going to change up my question to better make sense.
so here are some pics of what's going on.
http://imageshack.com/a/img633/2685/7UYA8e.png
http://imageshack.com/a/img905/8505/u0gI9U.png
http://imageshack.com/a/img538/7152/gV5jd9.png
Basically I am trying to use SVG to create rectangles as well as images and then manipulate them with the DOM and do things like drag.
Instead of having 1 SVG Root or w/e you want to call it, I have multiple ones, as in 1 SVG per div.
On Raphael when I went from 1 "paper" to multiple ones(it seemed like doing document.create(div) was causing issues as well and that an already created div worked). I get what is going on with JQuery SVG when "configure({height})" is set, which is the positions of my objects are messed up at lower amounts i.e., if my height is 1 it will be messed up, but if it's 100 it will be in place. It will mess up by going to positions farther down the page than it should, which can be seen in the images above.
If I have 1 paper in Raphael this doesn't happen, as well as if configure is off in JquerySVG; however if Configure is off, at some point (which can be seen in Image 1) I get my rectangles cut off, because my viewport isn't correct (thus needing configure to BE ON).
Raphael doesn't seem to have this cut off issue, which seems to be from what I gather from here http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
The second example has preserveAspectRatio set to xMinYMin slice. That will preserve aspect ratio, but scale the view box according to the larger aspect ratio (the x-axis with ratio 2), resulting in an image too big to fit within the viewport. The image is said to be "sliced".
If anyone has any recommendations on what I might be doing wrong I would appreciate it, but I'm not sure why I am having these issues.
I hope the pics suffice, because this is very annoying and I just want to know how to do what I need to without having issues....
My code
var scale = ....
for(var i = 0; i < total; i++)
{
var face = document.createElement("div");
face.id = 'face'+i;
document.getElementById('plan').appendChild(face);
$('#face'+i).svg();
var faceE = $('#face'+i).svg('get');
// faceE.configure({width: w*scale, height: h*scale}, true);
faceE.rect(0,0,w*scale,
h*scale,{fill:'black', stroke:
'red', strokeWidth: 0.3*scale});
$( '#face'+i ).draggable({ snap: true});
$('#face'+i).css({position:"absolute", left: x*scale, top:y*scale, width: w*scale, height:h*scale});
}
I'll try to make a fiddle later and hopefully I can get some results. is JQuery SVG part of Fiddle or do I need to do something special for it?
Get rid of the divs.
It will be faster if you generate the svgs pure from the server side whatever server code you are using.
Here I wrote you an example using Raphael but again from what read you don't need it.
var rows = 5;
var columns = 5;
var space = 5;
var rectWidth = ($(document).width()-((rows+1)*space))/rows;
var rectHeight = ($(document).height()-((columns+1)*space))/columns;
var p = [];
var y = 0;
for(i=0;i<rows;i++) {
for(z=0;z<columns;z++) {
p[y] = Raphael((i*rectWidth)+((i+1)*space),(z*rectHeight)+((z+1)*space),rectWidth,rectHeight);
p[y].rect(0,0,p[y].width,p[y].height).attr({fill:"red", stroke: "black","fill-opacity": ((i+1)*0.1) + ((z+1)*0.1)});
p[y].canvas.setAttribute('id', 'svg'+y);
$('#svg'+y).draggable({snap: true});
y++;
}
}