Элементы JquerySVG обрезаются в определенный момент, как это исправить?

Я создаю прямоугольники с помощью jQuerySVG 1.5, и у меня возникла проблема, когда у меня есть переменные данные для x, y, w и h. Я хочу увеличить масштаб своих элементов, поэтому у меня есть переменная, на которую я умножаю. Когда я устанавливаю scale в 2, прямоугольники печатаются нормально, но когда я устанавливаю в 3, некоторые из них обрезаются, а остальные «прячутся» за элементом.

Я видел эту проблему раньше, когда я возился. Чтобы исправить это, я бы установил CSS width и height на ширину и высоту моего элемента.

i.e., 

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

Почему-то в этот раз не работает. Я попытался добавить divs, которые я создаю для своего SVG, в другой div, это не работает, и установка высоты тела на большое число, например 1000 или 10000, не решает эту проблему.

Я также заметил, что если я сделаю прямоугольники действительно большими, а затем увеличу масштаб с помощью Google Chrome, это в зависимости от моей величины масштабирования в % отрежет больше или меньше прямоугольников.

Вот несколько фотографий, которые иллюстрируют мою проблему:

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

Любая помощь будет оценена по достоинству, спасибо.


svg jquery jquery-svg
person XaolingBao    schedule 19.11.2014    source источник
comment
Вам придется изменить width, height и viewPort элементов svg с помощью JavaScript. Например: document.getElementById('id-of-the-svg').setAtrribute('width', 'depends-on-your-scale')   -  person Weafs.py    schedule 19.11.2014
comment
или с jQuery: $('id-of-svg').attr('width', '...')   -  person Weafs.py    schedule 19.11.2014
comment
Конечно, это займет некоторое время, так как мне нужно собрать все данные JSON и сжать их для этого примера... Большое спасибо за правки :).. Редактировать: Хорошо, проверим... Спасибо :).   -  person XaolingBao    schedule 19.11.2014
comment
Можете ли вы точно объяснить, что такое окно просмотра и какие значения я хочу для него указать? Я просматриваю весь гугл и не нахожу ничего, кроме мета-просмотра... Спасибо :)   -  person XaolingBao    schedule 19.11.2014
comment
viewPort="x y width height" --------›, где x и y определяют верхний левый угол, а width и height определяют ширину и высоту видимой области. Например, если x и y были 1; а width и height были 100, тогда значения x и y будут из 1 - 100. В целом ваш элемент svg должен выглядеть как --------› <svg width="100" height="100" viewPort="1 1 100 100">....</svg>   -  person Weafs.py    schedule 19.11.2014
comment
Дело в том, что это для какого-то основного элемента или для всех моих элементов? Кажется, он просто отрезал все мои элементы, независимо от того, какой это элемент в какой-то момент. то есть он обрезается на 600x400. Если бы у меня был 1 элемент или 500, все, что пересекает эту линию, перейдет. также для дальнейшего использования, как мне это настроить? $('#svg'+i).attr('ширина', ...); $('#svg'+i).attr('высота', ...); $('#svg'+i).attr('viewport-x', ...); $('#svg'+i).attr('viewport-y', ...); $('#svg'+i).attr('ширина окна просмотра',...); $('#svg'+i).attr('viewport-height',...);   -  person XaolingBao    schedule 19.11.2014
comment
Хм, мне действительно нужно увидеть живой код. Если вы не можете настроить Fiddle, не могли бы вы загрузить его на свой сервер и дать мне ссылку?   -  person Weafs.py    schedule 19.11.2014
comment
Настройка скрипки сейчас, занимает некоторое время, извините: P. Здесь уже поздно, я могу вырубиться и закончить завтра.   -  person XaolingBao    schedule 19.11.2014
comment
Есть ли что-то особенное, что мне нужно добавить для работы jquerySVG. Fiddle не нравится мой код... извините, это заняло так много времени, я пытался получить полный пример и понял, что могу просто сделать небольшой пример, плюс это мой первый раз, когда я использую его: p. Думаю, завтра продолжу, спасибо!   -  person XaolingBao    schedule 19.11.2014
comment
В итоге я нашел результат самостоятельно, размещенный ниже, большое спасибо за помощь :).   -  person XaolingBao    schedule 20.11.2014
comment
Я не уверен, будете ли вы по-прежнему получать уведомление об этом чипе, но вся эта проблема все еще происходит, и это раздражает: P. Из одной задачи образовалось больше задач (проклятая Alien Queen...) Вот моя полная проблема с примерами из GitHub. Я отправил электронное письмо владельцу, поэтому надеюсь, что он сможет взглянуть на это, потому что это очень запутывает то, что происходит.... , Спасибо за вашу помощь до сих пор!   -  person XaolingBao    schedule 03.12.2014
comment
тьфу, я не смог опубликовать ссылку на github ... которая здесь. github.com/kbwood/svg/issues/15   -  person XaolingBao    schedule 04.12.2014

Ответы (1)


arrow_upward
1
arrow_downward

В итоге я решил проблему.

В основном у меня есть 1 div на элемент, поэтому я могу взаимодействовать с каждым элементом по отдельности. Это означает, что я должен использовать 0,0 в качестве x, y внутри div и установить местоположение моего div для правильного размещения элементов.

Это означает, что мне нужно было избавиться от x, y с моим прямоугольником и вместо этого использовать его с левым и верхним позиционированием css.

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

Я также добавляю возможность перетаскивания к этим прямоугольникам SVG $( "#svg"+i ).draggable({ snap: true });

Поэтому мне нужно, чтобы каждый элемент правильно содержался в 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

Я надеюсь, что это поможет любому, у кого есть проблемы с этим.

person XaolingBao    schedule 20.11.2014