问题
I am working on a Angular2 Project.
class Coordinate {
x:number;
y:number;
}
class Data {
.....
coordinates: Array<Coordinate>;
.........
}
This is a service file. I am using this service to access data in my Component's .ts file.
I want to use coordinates array to draw polyline on svg. In the template file, I am trying to set attribute 'd' of path element but can't figure out the right syntax to do so.
Following is the section of .html file of the component
<div>
<svg>
<path [[How am I supposed to set the d attribute here]]/>
</svg>
</div>
回答1:
In Angular svg requires some special treatment. This is a very good article about the issue: http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html
Now in your case in the template it should be:
<div>
<svg viewBox="0 0 480 480" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg:g>
<svg:path [attr.d]="yourVarThatStoresPathString"></svg:path>
</svg:g>
</svg>
</div>
In your ts file you should add logic that results in path string (like for example yourVarThatStoresPathString = "M0,0 480,0 480,480 0,480 0,0").
So if you have array of coordinates (x,y) you might need a function that translates that into such a string. Also in SVG there are additional literas (letters) used to identify specifics around a coordinate like M0,0 - means move pencil to 0,0 and start drawing, or Z after the coordinate may mean - link this last coordinate with the first.
Just as example:
let pathPoints = [
{
l: "M",
x: 135.00,
y: 245.00,
s: " "
},
{
l: "",
x: 135.00,
y: 110.00,
s: " "
},
{
l: "",
x: 345.00,
y: 110.00,
s: " "
},
{
l: "",
x: 345.00,
y: 245.00,
s: " "
},
{
l: "",
x: 345.00,
y: 380.00,
s: " "
},
{
l: "",
x: 135.00,
y: 380.00,
s: " "
},
{
l: "",
x: 135.00,
y: 245.00,
s: "Z"
},
]
l = letters, s - spacer I use for convenience.
constructPath(pathPoints) {
let pathD = "";
pathPoints.forEach((coordinate) => {
pathD = pathD + coordinate.l + coordinate.x + "," + coordinate.y + item.s;
});
return pathD;
}
}
This is of course a bit pseudo code but should give you a direction.
来源:https://stackoverflow.com/questions/50877255/how-to-set-attribute-d-pf-path-element-in-angular-2