Alert( el.getAttribute('points'));

JavaScript
1

I open this page:
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_polyline
I try this code:

<!DOCTYPE html>
<html>

<body>

<svg height="200" width="500">
  <polyline id="pl" points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
  Sorry, your browser does not support inline SVG.
</svg>


<script type="text/javascript">
function s(){
var el= document.getElementById('pl');

alert( el.getAttribute('points'));

el.style.transform="scale(0.5)";

alert( el.getAttribute('points'));

}


</script>
<input type="button" value="click me" onclick="s()">
</body>
</html>

Message boxs display same value.
I want new points value after change scale.

How can I do?

2

first check what el is. just because an attribute is named “id” does not mean it’s a target for document.getElementById().

second, el.style does not modify the attribute itself, it modifies the attribute’s representation in the DOM tree. you’d probably need to use setAttribute().

3

Which browser are you using it with? In Chrome and Firefox it works OK, but I got nothing in IE11 or Edge.

4

It appears that the points are relative to the polyline container itself, so when you apply the scale you shrink the container but the points remain the same within the container. Try the following script modification which will show the style before and after the scale change. The scaling is definitely working, but the points remain the same.

<script type="text/javascript">
function s()
{ var el= document.getElementById('pl');
 console.log( el.getAttribute('points'));
 console.log( el.getAttribute('style'));
 el.style.transform="scale(0.5)";
 console.log( el.getAttribute('points'));
 console.log( el.getAttribute('style'));
}
</script>
5

Thinking about it, that makes perfect sense.

That is, the points are “units” that vary depending on the scale.

For example, at “1”, 20 (units) might represent 80 pixels whereas at “0.5” it would represent 40 pixels.
But point 20 would still be point 20

@muazzez can you describe what exactly you’re after?

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.