如何使用jQuery设置矩形的高度和宽度

Question

我正在尝试使用jquery设置rect的宽度和高度，但出现错误“ Uncaught TypeError：无法读取null的属性'scrollWidth'”

以下是我的代码

 $(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>