javascript - 如何用jquery设置矩形的高度和宽度

Question

我正在尝试使用 jquery 设置矩形的宽度和高度，但出现错误“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>

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