获取svg元素的坐标将返回SVGAnimatedLength

问题描述 投票:0回答:1

我尝试了一个简单的测试来了解svg + JS的行为,因为我需要检查某个SVG对象是否在svg路径上并采取相应的措施。当尝试显式访问SVG元素的.cx或.cy属性时,在这种情况下为椭圆形,而不是获取坐标,而是获取了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>
javascript svg dom
1个回答
0
投票
如果要设置值,则应设置baseVal,只能通过SMIL设置animVal。

<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>
© www.soinside.com 2019 - 2024. All rights reserved.