JquerySVG elements get clipped at a certain point, how to fix this?

Question

I am creating some rectangles using jQuerySVG 1.5, and I am having an issue where I have variable data for x, y, w and h. I am looking to increase the scale of my elements, so I have a variable I am multiplying by. When I have set the scale to 2, the rectangles print fine, but when I set it to 3, some of them get cut off, and the rest are "hidden" behind an element.

I saw this problem before when I was messing around. To fix it I would set the CSS width and height to the width and height of my element.

i.e.,

$('#svg').css({ width: "100px", height: "100px", position: "absolute"});

For some reason it isn't working this time. I have tried adding the divs I create for my SVG into another div it doesn't work, nor does setting the body height to a large number like 1000, or 10000 does it fix this issue.

I've also noticed if I make the rectangles really big, and then zoom with google chrome that depending on my zoom % amount it will cut off more of less of the rectangles.

Here are some pictures that illustrate my issue:

http://imageshack.com/a/img540/7610/9KrAp3.png

Here is my code:

$.getJSON('test.json', function(data) {
  var scale = 2;
  for (var i = 0; i < total; i++) {
    var svg = document.createElement("div");
    svg.id = 'svg' + i;
    document.body.appendChild(svg);
    $('#svg' + i).svg();
    var svgE = $('#svg' + i).svg('get');
    svgE.rect(x,y,w,h, {
        stroke: 'lightblue',
        strokeWidth: 0.5
      });

    $('#svg' + i).css({
      position: "absolute"
    });
  }
});

Any help would be appreciated, thank you.

Answer 1

I ended up solving the problem.

Basically I have 1 div per element, so I can interact with each element individually. This means I have to use 0,0 as my x,y within the div, and set my div's location to place the items properly.

This means I needed to get rid of x,y with my rectangle, and use it with left, and top as css positioning instead.

$('#svg').css({width: width, height: height, position: "absolute", left:x, top: y});

I am also adding draggable to these svg rectangles $( "#svg"+i ).draggable({ snap: true });

So I need each element to be contained within the div properly, or else I will be snapping to random areas of the screen.

What happens is, for some reason, the svg is setting the width of my viewport to be 3000, but no height at all. I'm not sure what the viewport height is, but after awhile it breaks.

To do this I tried changing the viewport, and the viewbox with svg.configure(), with no luck. However if I try setting "width and height" of my SVG element, it works. Apparently this is setting the ViewPort's width and height directly, so I'm not sure why "

So the full code to get what I need working is.

    var svg = document.createElement("div");

    svg.id = 'svg';       
    document.body.appendChild(svg);

    $('#svg').svg();


    var svgE = $('svg').svg('get'); 
    svgE.configure({width: width, height: height, true);   
//According to the docs, the boolean at the end is ------ 

//clear (boolean, optional) is true to remove existing attributes first,
 //or false (default) to add to what is already there.
//in my case I want to rewrite everything.


 svgE.rect(0,0,data.width, height); //can also add other settings like fill within the rect
 // faceE.rect(0,0, width, height,{fill: color, stroke: color, strokeWidth: 1});

$( '#svg').draggable({ snap: true});
$('#svg').css({position:"absolute", left: x, top: y}); 

More information on SVG ViewPort and ViewBox can be found here http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

I hope anyone who has issues with be helped by this.