如何使用jquery设置矩形的高度和宽度答案

【问题标题】：How to set height and width of rect with jquery如何使用jquery设置矩形的高度和宽度
【发布时间】：2017-05-05 18:13:47
【问题描述】：

我正在尝试使用 jquery 设置 rect 的宽度和高度，但出现错误 "Uncaught TypeError: Cannot read property 'scrollWidth' of null"

以下是我的代码

$(document).ready(function() {
   var winw = $(document).width();
   var winh = $(document).height(); 

   $("#mask > rect").width(winw);
   $("#mask > rect").height(winh);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
  <defs>
    <mask id="mask">
      <rect x="0" y="0" width="1920" height="1024" fill="#ff0000" fill-opacity=".75" />
      <circle r="140" cx="240" cy="240" fill="#000" fill-opacity="1" stroke="none" />
    </mask>
  </defs>
</svg>

【问题讨论】：

标签： javascript jquery html css svg

【解决方案1】：

试试attr()

$(document).ready(function() {
   var winw = $(document).width();
   var winh = $(document).height(); 
   console.log('before-width:'+$("#mask > rect").attr('width'))
   console.log('before-height:'+$("#mask > rect").attr('height'))
   $("#mask > rect").attr('width' , winw);
   $("#mask > rect").attr('height',winh);
   console.log('after-width:'+$("#mask > rect").attr('width'))
   console.log('after-height:'+$("#mask > rect").attr('height'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
  <defs>
    <mask id="mask">
      <rect x="0" y="0" width="1920" height="1024" fill="#ff0000" fill-opacity=".75" />
      <circle r="140" cx="240" cy="240" fill="#000" fill-opacity="1" stroke="none" />
    </mask>
  </defs>
</svg>

【讨论】：

它工作完美！ +1 对此的即时建议。！