I want to mulitiply the coordinates of some points with coefficient coeff. The problem is that theses coordinates points are in a string props, and it doesn't seem to work if I just multiply them by a {coeff} const. I'm sure this is a trivial problem but I'm kind of a beginner.

Here's the original code (40,5 is the first x1,y1, 70,80 is x2,y2 etc):

<Svg height="100" width="100">
  <Polygon
    points="40,5 70,80 25,95"
    fill="lime"
    stroke="purple"
    strokeWidth="1"
  />
</Svg>

and here's what I'm try to do :

const coeff = 1;
...
<Svg height="100" width="100">
  <Polygon
    points="40*${coeff},5*${coeff} 70*${coeff},80*${coeff} 25*${coeff},95*${coeff}"
    fill="lime"
    stroke="purple"
    strokeWidth="1"
  />
</Svg>

Thanks

CodePudding user response：

Possible using template literals.

let coeff = 2;
console.log(`${40*coeff} , ${5*coeff},
${70*coeff}, ${80*coeff} ,${25*coeff},
${95*coeff}`);

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Here is a simple JS example but can be used similarly in JSX.