html - Jquery 认为我的 元素是可见的，即使显示设置为无和/或可见性设置为隐藏

Question

请看一下我在下面创建的示例。当您单击该按钮时，<g>被切换并且绿点被显示或隐藏。

奇怪的是，is(':visible')总是返回 true，即使 visibility设置为hidden .

为什么会发生这种情况？

console.log('Jquery running...')

$("button").click( () => {
  var prev = $("g").attr('visibility');
  if (prev === 'hidden') {
$('g').attr('visibility', 'visible');
  } else {
$('g').attr('visibility', 'hidden');
  }

  console.log('element is visible:', el.is(':visible'));
});

var el = $('g');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>My Example</p>

<svg width="20" height="30">

<g>
<circle cx="10" cy="10" r="10" fill="green"></circle>
</g>
</svg>

<button> Toggle Dot </button>

更新

我还尝试设置 display至none早些时候，它也不起作用

Answer 1

有两个单独的案例值得关注:

---

可见性:隐藏

根据the JQuery documentation，具有可见性:隐藏的元素是，仍然被 :visible 选择器视为可见:

Elements with visibility: hidden or opacity: 0 are consideredvisible, since they still consume space in the layout.

---

显示:无

具有 display: none 的元素不会占用布局中的空间，因此理论上不应由 :visible 选择器选择。当我们查看JQuery code时用于确定元素是否可见，它基于三个值:

jQuery.expr.pseudos.visible = function( elem ) { 
        return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

至少在 Chrome 中，SVG 元素的 offsetWidth 和 offsetHeight 未定义。

这给我们留下了客户端矩形，这似乎就是问题所在，因为仍然有一个客户端矩形与具有其display的g元素关联> 设置为无:

console.log('Jquery running...')

$('button').click(() => {
  var prev = $('g').css('display');
  if (prev === 'none') {
    $('g').css('display', 'block');
  } else {
    $('g').css('display', 'none');
  }
  
  console.log(el[0].getClientRects().length); // 1
})

var el = $('g');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>My Example</p>

<svg width="20" height="30">

<g>
<circle cx="10" cy="10" r="10" fill="green"></circle>
</g>
</svg>

<button> Toggle Dot </button>

---

看起来像是 Chrome 中的错误，因为它在 Firefox 中可以正常工作。然而，似乎确实有confusion关于在内部 SVG 元素的情况下 getClientRects() 需要返回什么。