Tooltip/Popover 对svg元素如line显示异常

[rauki]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.6

Environment

"vue": ">=3.2.0", "ant-design-vue": "4.2.6"

Reproduction link

Steps to reproduce

PS：codesandbox 链接打开可能报错，执行一下preview可以解决
用tooltip包裹svg中的line元素，鼠标hover在line元素上方，无法正确显示tooltip title内容

What is expected?

鼠标hover在line元素上方，显示tooltip title设定内容

What is actually happening?

无法正确显示tooltip title内容

[YiMo1]

因为svg内只能存在特定元素。

[rauki]

因为svg内只能存在特定元素。

看现象是tooltip title dom创建出来了没法正确显示

[YiMo1]

看现象是tooltip title dom创建出来了没法正确显示

在svg中非特定元素会被浏览器“屏蔽”，你可以试试下面这段html。

<svg style="width: 200px; height: 200px">
  <div style="background-color: red; width: 100px; height: 100px">这个div无法显示，即使它在dom树中</div>
  <g>
    <line x1="120" x2="270" y1="40" y2="40" stroke="#20b319" stroke-width="3"></line>
  </g>
</svg>

[YiMo1]

你可以查看这个Issue vuejs/core#1995

[rauki]

看现象是tooltip title dom创建出来了没法正确显示

在svg中非特定元素会被浏览器“屏蔽”，你可以试试下面这段html。

<svg style="width: 200px; height: 200px">
  <div style="background-color: red; width: 100px; height: 100px">这个div无法显示，即使它在dom树中</div>
  <g>
    <line x1="120" x2="270" y1="40" y2="40" stroke="#20b319" stroke-width="3"></line>
  </g>
</svg>

确实是这样，但是图上的dom元素是在div外面创建的，并不是在svg内部

[rauki]

ant design的Popover貌似是支持的

[YiMo1]

确实是这样，但是图上的dom元素是在div外面创建的，并不是在svg内部

ant design的Popover貌似是支持的

这和两者的实现有关，React怎么实现的不太清楚，但Vue会对这种在svg中的元素做特殊处理，虽然它实际并不在svg的内，但Vue会认为这个元素属于svg空间。

正常情况下，如果svg内含有非法元素，这个非法元素会被浏览器特殊处理。你可以直接新建一个HTML文件输入以下代码查看。

<svg style="width: 200px; height: 200px">
  <div>123123123</div>
  <g>
    <line x1="120" x2="270" y1="40" y2="40" stroke="#20b319" stroke-width="10"></line>
  </g>
</svg>

你会发现div元素和g元素竟然跑到外面去了！svg元素内什么都没有！

如果你试试这段代码。

<svg style="width: 200px; height: 200px">
  <g>
    <line x1="120" x2="270" y1="40" y2="40" stroke="#20b319" stroke-width="10"></line>
  </g>
  <div>123123123</div>
</svg>

你会发现div依旧在外面，svg里包含g元素。这说明svg元素内本就不允许这种非法元素。浏览器会对这种情况做特殊处理。

但如果你将上诉代码放到Vue项目中，你会发现无论在顶部还是底部。div元素竟然存在于svg内部！

你可能很好奇这是为什么？一开始我也很好奇，然后我就查看了这个div元素的属性，发现了根本原因是因为Vue把div元素的原型给更改了！

这是在Vue项目中的。

这是在HTML文件中的。

所以虽然它是div标签，但它本质上是属于svg空间的元素，像是披着羊皮的狼。而浏览器对于这种元素是无法显示的，可能是浏览器无法去解析这种元素，自然而然就无法显示这个元素。

[YiMo1]

具体Vue源码（简化）如下。

// https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/nodeOps.ts
function createElement(tag, namespace) => {
  return namespace === 'svg'
      ? doc.createElementNS('http://www.w3.org/2000/svg', tag)
      : doc.createElement(tag)
}

// https://github.com/vuejs/core/blob/main/packages/runtime-core/src/renderer.ts
function mountElement(
  n2: VNode,
  namespace,
) => {
  if (n2.type === 'svg') {
    namespace = 'svg' // 挂载到svg元素时，会将namespace值更改为svg，并将更改后的值传递给mountChildren函数
  }
  el = createElement(vnode.type, namespace)
  mountChildren(vnode.children, namespace)
}

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days