时间戳

首页 > 解决方案 > 用 JS 中的变量控制 SVG 矩形的高度和宽度

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

问题描述

我需要根据 JavaScript 中的可变高度和宽度创建矩形。这是原始代码 https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_rect

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

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

我尝试了其他变体+ h +，${h}但没有一个有效，矩形没有显示

标签： javascriptsvg

解决方案

该语法无效。

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

您可以动态innerHTML设置bodyusing template literals：

<!DOCTYPE html>
<html>
<body>
  <script>
    var h = 50;

    document.body.innerHTML += `
      <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>

或者您可以给rect元素一个 id 并使用它setAttribute来设置的height属性rect：

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

还有很多模板引擎可以让您以更具声明性的方式执行此操作，但这些引擎太多了，无法在此一一提及，因此如果您有兴趣，可以在 Google 上搜索。

更新

基于事件触发属性变化：

<!DOCTYPE html>
    <html>
    <body>
      <svg width="400" height="110">
      <rect id="rect" width="300" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
      Sorry, your browser does not support inline SVG.  
      </svg>
      <script>
        const rect = document.getElementById("rect");
        rect.onmouseover = function () {
            rect.setAttribute("height", 50);
        };
      </script>
    </body>
    </html>

推荐阅读