получение координат элемента svg возвращает SVGAnimatedLength

Question

Я попробовал простой тест, чтобы понять поведение svg + JS, так как мне нужно проверить, находится ли определенный объект SVG на пути svg, и действовать соответствующим образом. При попытке явного доступа к свойствам .cx или .cy элемента SVG, в данном случае эллипса, вместо получения координат я получаю объект SVGAnimatedLength.

<svg
   id="contenedorCirculo"
   width="200mm"
   height="200mm"
   viewBox="0 0 200 200"
   version="1.1"
>
<g
   inkscape:groupmode="layer"
   id="layer3"
   inkscape:label="points">
<ellipse
 style="fill:#ff00e5;fill-opacity:1;stroke:#fbde00;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 id="circulo"
 cx="50"
 cy="50"
 rx="5"
 ry="5" />

</g>
</svg>

<script>
//this returns SVGAnimatedLength { baseVal: SVGLength, animVal: SVGLength }
console.log(document.getElementById("circulo").cx);

</script>

Answer 1

Вы, вероятно, ищете значение. Из-за SMIL есть анимированное значение и базовое значение для многих атрибутов SVG. Если вы на самом деле не используете SMIL, animVal и baseVal будут одинаковыми

Если вы хотите установить значение, вы должны установить baseVal, animVal можно установить только через SMIL.

<svg
   id="contenedorCirculo"
   width="200mm"
   height="200mm"
   viewBox="0 0 200 200"
   version="1.1"
>
<g
   inkscape:groupmode="layer"
   id="layer3"
   inkscape:label="points">
<ellipse
 style="fill:#ff00e5;fill-opacity:1;stroke:#fbde00;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 id="circulo"
 cx="50"
 cy="50"
 rx="5"
 ry="5" />

</g>
</svg>

<script>
//this returns SVGAnimatedLength { baseVal: SVGLength, animVal: SVGLength }
console.log(document.getElementById("circulo").cx.animVal.value);

</script>