动态插入的SVG <rect>元素不可见

Question

我想向特定的SVG元素添加一个覆盖矩形。这样要达到选择效果，所以矩形具有不透明度。插入内容绑定到按钮。单击它后，在开发人员工具/元素（Chrome，与Firefox相同）中会看到一个新的<rect>，但在浏览器中看不到。如果我在元素面板的同一位置剪切-保存-插入 <rect>，则可见。

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