Question

我正在使用jQuerySVG 1.5创建一些矩形，我遇到了x，y，w和h的可变数据问题。我希望增加我的元素的规模，所以我有一个变量我乘以。当我将scale设置为2时，矩形打印正常，但当我将其设置为3时，其中一些会被切断，其余部分会被“隐藏”在元件。

在我搞砸之前，我看到了这个问题。要解决此问题，我会将CSS width和height设置为元素的宽度和高度。

即，

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

由于某种原因，这次不能正常工作。我已经尝试将我为我的SVG创建的div添加到另一个div它不起作用，也没有将身高设置为1000这样的大数，或10000它是否解决了这个问题。

我还注意到，如果我使矩形变得非常大，然后使用谷歌浏览器进行缩放，这取决于我的缩放％数量，它会切断更多的矩形。

以下是一些说明我的问题的图片：

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

这是我的代码：

$.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"
    });
  }
});

任何帮助将不胜感激，谢谢。

Answer 1

我最终解决了这个问题。

基本上我每个元素有1个div，所以我可以单独与每个元素进行交互。这意味着我必须在div中使用0,0作为我的x，y，并设置我的div的位置以正确放置项目。

这意味着我需要用我的矩形摆脱x，y，并将其用于左侧，而顶部用作css定位。

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

我还在这些svg矩形$( "#svg"+i ).draggable({ snap: true });

中添加了draggable

所以我需要将每个元素正确地包含在div中，否则我将捕捉到屏幕的随机区域。

出于某种原因，svg将视口的宽度设置为3000，但根本没有高度。我不确定视口高度是多少，但过了一段时间它会断开。

为此，我尝试使用svg.configure()更改视口和视图框，但没有运气。但是，如果我尝试设置SVG元素的“宽度和高度”，它就可以工作。显然这是直接设置ViewPort的宽度和高度，所以我不确定为什么“

所以获得我需要的工作的完整代码是。

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

有关SVG ViewPort和ViewBox的更多信息，请访问http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

我希望任何有问题的人都能得到帮助。

JquerySVG元素在某一点被剪裁，如何解决这个问题？

1 个答案: