0

I want to add an overlay rectangle to a particular SVG element. In this way want to achieve a selection effect, so the rectangle has opacity. The insertion is bound to a button. After clicking it, a new <rect> is visible in the Developer Tools/Elements (Chrome, the same for Firefox) but not in the browser. If I cut - save - insert the <rect> on the same place in the Elements panel it is visible.

$("#chooseMeasure").on("click", function () {

    /*  create rectangle*/
    var rect = document.createElement("rect");
    /*  find coordinates of the searched measure*/
    var measure = document.getElementById("m1");
    var measureCoord = measure.getBBox();

    /*  set the attributes to the rectangle*/
    rect.setAttribute('x', measureCoord.x);
    rect.setAttribute('y', measureCoord.y);
    rect.setAttribute('width', measureCoord.width);
    rect.setAttribute('height', measureCoord.height);
    rect.setAttribute('fill', 'rgba(179, 236, 255, 0.4)');

    /*  append the rectangle as last child of the measure*/;    
    measure.appendChild(rect);
})

-

<svg height="2970px" overflow="visible" version="1.1" width="2100px" xmlns="http://www.w3.org/2000/svg">
    <svg class="definition-scale" viewBox="0 0 21000 29700">
        <g class="page-margin" transform="translate(500, 500)">
            <g class="system" id="system-0000001957991621">
                <g class="measure" id="m1">
                    <rect fill="rgba(179, 236, 255, 0.4)" height="4991.740234375" width="4542" x="20" y="937.5"/>
                </g>
            </g>
        </g>
    </svg>
</svg>
o-sapov
  • 320
  • 2
  • 13
  • 1
    Please use [document.createElementNS](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS) and [setAttributeNS](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNS) where NS represent the name space – enxaneta Aug 22 '19 at 14:49
  • 1
    Thank you, I thought it was about the namespace and tried to add it with setAttribute()... – o-sapov Aug 22 '19 at 15:44

0 Answers0