CODEWITHSUNDEEP
javascripthtmlsvg
user7234781
user7234781

Reputation:

Get position of svg element

Why i can not get values of cx and cy ? its print some array. i need only 2 values

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50" fill="red" id="cir"/>
</svg>

<script>
        console.log(document.getElementById("cir").cx);
        console.log(document.getElementById("cir").cy);
</script>
</body>

</html>

Upvotes: 0

Views: 2573

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101918

The cx and cy properties are SVGAnimatedLength objects, not strings or numbers.

To get the actual value for cx, you need to do:

cx.baseVal.value


<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50" fill="red" id="cir"/>
</svg>

<script>
        console.log(document.getElementById("cir").cx.baseVal.value);
        console.log(document.getElementById("cir").cy.baseVal.value);
</script>
</body>

</html>

Upvotes: 5

Jeremy Thille
Jeremy Thille

Reputation: 26400

Use console.log() instead of Console.log()

console is defined by the browser, Console is not (JS, as most languages, is case-sensitive)

Upvotes: 0

Related Questions