Search code examples
jsonangularsvgpolyline

How to draw SVG Polyline using JSON


"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.


Solution

  • 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>