Question

我正在尝试使用jquery设置rect的宽度和高度，但是我收到错误＆＃34; Uncaught TypeError：无法读取属性＆＃39; scrollWidth＆＃39; of null＆＃34;

以下是我的代码

＆＃13;

$(document).ready(function() {
   var winw = $(document).width();
   var winh = $(document).height(); 

   $("#mask > rect").width(winw);
   $("#mask > rect").height(winh);
});

＆＃13;

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

＆＃13;

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>

如何使用jquery

1 个答案: