SVG 与 Fragment

SVG

支持 SVG 原生标签以及 xlinkHref → xlink:href 映射。

Fragment

Vue 2 没有与 Vue 3 相同的根 Fragment 语义：

• fragment: 'error'：默认报错，要求显式包裹根节点。
• fragment: 'array'：转换为 VNode 数组，适合 children 等能够接收数组的位置。

Demo 在普通元素 children 中使用 Fragment：

import Vue from 'vue'

export default Vue.extend({
  name: 'SvgFragmentDemo',
  data: () => ({ iconId: '#demo-check' }),
  render(this: any) {
    return (
      <article class="demo-card">
        <span class="case-label">SVG / xlink / Fragment</span>
        <h3>SVG 与嵌套 Fragment 数组</h3>
        <svg width="0" height="0" aria-hidden="true">
          <symbol id="demo-check" viewBox="0 0 24 24">
            <path d="M5 12l4 4L19 6" fill="none" stroke="currentColor" stroke-width="2" />
          </symbol>
        </svg>
        <div class="fragment-row">
          <>
            <svg class="demo-icon" viewBox="0 0 24 24"><use xlinkHref={this.iconId} /></svg>
            <span>Fragment child A</span>
            <span>Fragment child B</span>
          </>
        </div>
      </article>
    )
  }
})