Question

好吧，既然有人贬低了这个而不是试图要求改变，那么我将改变我的问题以更好地理解。

所以这里有一些正在发生的事情。

http://imageshack.com/a/img633/2685/7UYA8e.png

http://imageshack.com/a/img905/8505/u0gI9U.png

http://imageshack.com/a/img538/7152/gV5jd9.png

基本上我正在尝试使用SVG创建矩形和图像，然后使用DOM操作它们并执行拖动等操作。

我没有1个SVG Root或w / e你想要调用它，而是有多个，如每个div 1个SVG。

拉斐尔，当我从1＆＃34;纸张＆＃34;多个（似乎做document.create（div）也导致问题，并且已经创建的div工作）。当＆＃34; configure（{height}）＆＃34;我得到JQuery SVG正在发生的事情。设置，这是我的对象的位置被搞砸了较低的数量，即，如果我的高度为1，它将搞砸，但如果它是100，它将在适当的位置。通过进入页面下方的位置会比它应该更加混乱，这可以在上面的图像中看到。

如果我在拉斐尔有一篇论文，那么就不会发生这种情况，以及如果在JquerySVG中关闭了配置;但是如果配置关闭，在某些时候（可以在图1中看到）我的矩形会被切断，因为我的视口不正确（因此需要配置为开启）。

拉斐尔似乎没有这个截止问题，这似乎来自我从这里收集的http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

第二个示例将preserveAspectRatio设置为xMinYMin slice。这将保留纵横比，但会根据较大的纵横比（x轴与比率2）缩放视图框，从而导致图像太大而无法放入视口中。据说图像是＆＃34;切片＆＃34;。

如果有人对我可能做错了什么有任何建议我会很感激，但我不知道为什么我会遇到这些问题。

我希望这些照片足够，因为这非常烦人，我只想知道如何在没有问题的情况下做我需要的事情....

我的代码

   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}); 

}

我稍后会尝试做一个小提琴，希望我能得到一些结果。是Fiddle的JQuery SVG的一部分还是我需要做一些特别的事情呢？

Answer 1

摆脱div。

如果从服务器端生成svgs pure，无论使用哪种服务器代码，它都会更快。

在这里，我用拉斐尔写了一个例子，但是从你不需要它的内容中再次写了一个例子。

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++;
  }
}

http://jsfiddle.net/crockz/35ab0k19/

使用JQuery SVG和Raphael.js在每个div创建1个SVG元素时使用rect的Y位置问题

1 个答案: