javascript - svg 文本旋转中的 JSX 变量 {MyX} 不起作用

Question

我尝试使用标签将旋转文本放置在 svg 窗口中，但旋转(90 100 70)不会采用 {MyX} 条目而不是数字 100，下面是带有一行的 JSX 的一小部分有效的和无效的。请注意，我在之前的属性中使用了 {MyX}，效果非常好。为什么它可以在旋转中工作？

var w = 300
var h = 300
var MyX = 100
......
<svg width={w} height={h}>

//this line works if I put the x manually in the second parameter of rotate
<text x={MyX} y="70" stroke="black" transform="rotate(-90 100 70)">
    HELLO
</text> 

//this line gives this compile error shown below
<text x={MyX} y="70" stroke="black" transform="rotate(-90 {MyX} 70)">
    HELLO
</text> 

</svg>

//这里是chrome开发窗口的错误 react-dom.development.js:11720 错误:属性转换:预期为 ')'，“旋转(-90 {MyX} 70)”。

Answer 1

尝试使用这个:

transform={`rotate(-90 ${MyX} 70)`}

More about template literals