How to draw SVG Polyline using JSON

43 Views Asked by At
"markers": [
        {
            "Type": "hello",
            "ID": "4214",
            "Name": "75915",
            "points": [
                4578.3,
                780.0
            ]
        },
        {
            "Type": "hello",
            "ID": "1196",
            "Name": "SD484",
            "Point": [
                82.0,
                875.0
            ]
        }
] 

Here I want get Point as x And y

I tried many ways but it did not work.

1

There are 1 best solutions below

0
Tony On BEST ANSWER

Something around the lines of the following....

viewbox = '0 0 5000 2500';

data = {"markers": [ { "Type": "hello", "ID": "4214", "Name": "75915", "points": [ 4578.3, 780.0 ] }, { "Type": "hello", "ID": "1196", "Name": "SD484", "Point": [ 82.0, 875.0 ] } ]}

points = data.markers.map(marker => `${marker.points[0]}, ${marker.points[1]} `);
<svg  [attr.viewBox]="viewbox">
  <svg:polyline [attr.fill]="'none'" stroke="black" stroke-width="1" [attr.points]="points">
  </svg:polyline>
</svg>