Home/ Questions/Q 7671457
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T16:03:44+00:00

This is my svg code for instance. <rect x=1531.718 y=1688.217 opacity=0.8 fill=#FEE880 enable-background=new width=40.67

  • 0

This is my svg code for instance.

<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>

How can I get the position, width & height when a div is wrapped around a polygon in the svg. I prefer to use jQuery.

I did this for the “rect”s in the svg, it works like charm!:) Here’s the code:

 $('#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;">');

    }

I could not do it like the rect, because for polygons there’s only one attr… POINTS!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Please have a look at this fiddle http://jsfiddle.net/SLJp4/. In this fiddle, the square is a polygon. To continue, press the “scale the polygon” button(scroll a page a bit to see the button). The red fading div is in body. This red colored div will change its shape and position as you scale and translate the polygon using the button provided.

    To explain the code:

    tl – top left point of the polygon’s bounding box(in usr coordinate).

    br – bottom right point of the polygon’s bounding box(in usr coordinate).

    we shift these points to global user coordinate by

    tl = tl.matrixTransform(matrix)

    and br = br.matrixTransform(matrix)

    One thing i need is “how to calculate the 2 in width = (br.x – tl.x) * 2 programatically”. Where “2” is 400px/200.

    Then we are offseting the red div to the calculated points.

    note: I could not paste the scripts in the js portion of the fiddle window (throwing error), so pasted it in the html portion itself.

    • 0