Skip to content

svg 标签中的 <usg> 没有映射到对应 symbol 值 #215

@zengqingxiao

Description

@zengqingxiao

最新版本使用
<svg width="40" height="40"> <use xlink:href="#icon" /> </svg>

写法无法正常渲染截图
修复方式:
再生成截图的时候执行方法
`inlineSvgSymbols(node) {
const uses = node.querySelectorAll('use')

        uses.forEach(use => {
            const href =
                use.getAttribute('xlink:href') ||
                use.getAttribute('href')

            if (!href || !href.startsWith('#')) return

            const id = href.slice(1)
            const symbol = document.getElementById(id)
            if (!symbol) return

            const svg = use.closest('svg')
            if (!svg) return

            const viewBox = symbol.getAttribute('viewBox') || '0 0 1024 1024'
            const attrs = [...svg.attributes].map(a => `${a.name}="${a.value}"`).join(' ')
            const inlineSvg = `
            <svg ${attrs}  viewBox="${viewBox}" xmlns="http://www.w3.org/2000/svg">
                ${symbol.innerHTML}
            </svg>`

            svg.outerHTML = inlineSvg
        })
    },`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions