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

Question

我试图使用jQuery来设置宽度和矩形的高度，但我得到的错误“遗漏的类型错误：无法读取属性空的‘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>