Как обернуть тег "div" вокруг многоугольника в SVG? - PullRequest
Новая
       16

Как обернуть тег "div" вокруг многоугольника в SVG?

0 голосов
/ 21 марта 2012

Это мой svg-код, например. 

<rect x="1531.718" y="1688.217" opacity="0.8" fill="#FEE880" enable-background="new    " width="40.67" height="27"></rect>
            <rect x="1531.718" y="1661.217" opacity="0.8" fill="#F67B9E" enable-background="new" width="40.67" height="27"></rect>
            <rect x="1335.718" y="1053.356" opacity="0.8" fill="#FEE880" enable-background="new" width="236.67" height="153.01"></rect>
            <polygon opacity="0.8" fill="#F67B9E" enable-background="new    " points="1572.388,970.547 1572.388,1016.547 
                1509.718,1016.547               "></polygon>

Как я могу получить положение, ширину и высоту, когда div оборачивается вокруг многоугольника в svg. Я предпочитаю использовать jQuery.

Я сделал это для "rect" в svg, это работает как шарм! :) Вот код: 

 $('#mapArea').load('src/124/124.svg', function(){

    var inputs = $('#mapArea').find('rect');
    var inputsCount = inputs.size();

    for (i=1;i<inputsCount;i++){

        var positionX = $('#mapArea').find('rect:eq('+i+')').attr('x');
        var positionY = $('#mapArea').find('rect:eq('+i+')').attr('y');
        var width = $('#mapArea').find('rect:eq('+i+')').attr('width');
        var height = $('#mapArea').find('rect:eq('+i+')').attr('height');
        $('#mapArea').after('<div style="position:absolute;width:'+width+'px;height:'+height+'px;background:rgba(0,0,0,0.4);top:'+positionY+'px;left:'+positionX+'px;">');

    }

Я не мог сделать это как прямоугольник, потому что для полигонов есть только один атрибут ... ТОЧКИ!

1 Ответ

1 голос
/ 22 марта 2012

Пожалуйста, посмотрите на эту скрипку http://jsfiddle.net/SLJp4/. В этой скрипке квадрат является многоугольником.Чтобы продолжить, нажмите кнопку «Масштабировать многоугольник» (прокрутите страницу, чтобы увидеть кнопку).Красный исчезающий div находится в теле.Этот красный div изменяет свою форму и положение при масштабировании и переводе многоугольника с помощью предоставленной кнопки.

Чтобы объяснить код:

tl - вверхлевая точка ограничительной рамки многоугольника (в координатах usr).

br - нижняя правая точка ограничительной рамки многоугольника (в координатах usr).

мы сдвигаем эти точкик глобальной пользовательской координате с помощью 

tl = tl.matrixTransform(matrix)

и br = br.matrixTransform(matrix)

Одна вещь, которая мне нужна, - это «как рассчитать 2 по ширине = (br.x - tl.x)* 2 программно ".Где "2" - 400px / 200.

Тогда мы смещаем красный div к вычисленным точкам.

note : я не смог вставить скрипты в jsчасть окна скрипки (ошибка генерирования), поэтому вставьте ее в html-часть.

...