Javascript 用JS中的变量控制SVG矩形的高度和宽度_Javascript_Svg

Javascript 用JS中的变量控制SVG矩形的高度和宽度

javascript svg

Javascript 用JS中的变量控制SVG矩形的高度和宽度,javascript,svg,Javascript,Svg,我需要在JavaScript中基于可变高度和宽度创建矩形。这是原始代码我试图修改可变高度，但它不起作用 <!DOCTYPE html> <html> <body> <script> var h=50 <svg width="400" height="110"> <rect width="300" height=`${h}` style="fill:rgb

我需要在JavaScript中基于可变高度和宽度创建矩形。这是原始代码

我试图修改可变高度，但它不起作用

<!DOCTYPE html>
<html>
<body>
<script>
var h=50
<svg width="400" height="110">
  <rect width="300" height=`${h}` style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  Sorry, your browser does not support inline SVG.  
</svg>
 </script>
</body>
</html>


var h=50
很抱歉，您的浏览器不支持内嵌SVG。

我尝试过其他变体，如

+h+

和

${h}

，但没有一个有效，并且矩形没有显示语法无效

有多种方法可以做到这一点

您可以使用以下方法动态设置

主体的


var h=50；
document.body.innerHTML+=`
很抱歉，您的浏览器不支持内嵌SVG。
`;
@BasvanderLinden我可以在浏览器中尝试的正确语法是什么？这可以包装在接受高度作为参数的函数中吗？当然可以，触发器应该是什么？你是指参数吗？若有，高度。若我理解你们看到更新的答案，那个么触发器可以是鼠标悬停。上一个示例中的函数不带参数，因为这里不需要带参数。但是，如果需要，可以将参数传递给匿名函数，在本例中没有意义。谢谢@Bas van der Linden