在内联SVG中对元素进行分组会禁用组子项上的getElementById（）

Question

我有一个直接在我的HTML文档中编写的简单SVG。它包含一个path，其唯一ID为originalPath。我可以path直接访问getElementById()，如下所示：

HTML：

<svg id="previewImage" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="originalPath" d="" fill="none" stroke="black" stroke-width="1"></path>
</svg>

JS：

var svg = document.getElementById("previewImage");
var svgPath = svg.getElementById("originalPath");
// var svgPath = $("#originalPath")[0]; // Also working

但是，如果我将originalPath包装在一个组中（直接在HTML中），getElementById()函数会突然停止工作，svgPath为undefined。 jQuery行也不起作用。

<svg id="previewImage" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>        
        <path id="originalPath" d=""></path>
    </g>
</svg>

我看不出我做错了什么。我甚至尝试首先访问该组，然后尝试访问其子组，但没有任何成功。有人能指出我正确的方向吗？