Wie Höhe und Breite des rect setzen mit jquery

Question

Ich versuche, die Breite und Höhe des rect einstellen jquery verwenden, aber ich bin immer Fehler „Uncaught Typeerror: kann Eigenschaft‚scrollWidth‘von null lesen“

Es folgt mein Code

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

Versuchen mit 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>