jQuery认为我的<g>元素可见，即使显示设置为无和/或可见性设置为隐藏

Question

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

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

为什么会这样？

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

切换circle的可见性

jQuery源代码：

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

此处offsetWidth, offsetHeight, getClientRects()为null元素返回g

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

$("button").click(() => {
  el.toggle();

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

var el = $('g circle');

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

Answer 2

有两种情况值得关注：

---

visibility: hidden

根据the JQuery documentation，带有visibility: hidden的元素仍被:visible选择器认为是可见的：

具有visibility: hidden或opacity: 0的元素被认为 可见，因为它们仍然占用布局中的空间。

---

display: none

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

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

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

这给我们留下了客户端rect，这似乎是问题所在，因为仍然有一个与g元素相关联的客户端rect的display设置为{{1 }}：

none

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');

---

看起来像Chrome中的错误，因为它在Firefox中可以正常工作。但是，对于内部SVG元素，<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>似乎需要返回confusion。