将图片转为Base64嵌入SVG元素时出现异常显示问题

原因 #

你用document.createElement('image')创建的是HTML废弃的<image>元素，而非SVG规范里的<image>标签。SVG属于独立的XML命名空间，普通HTML元素无法被SVG渲染引擎识别，所以动态添加后不会显示。而通过开发者工具编辑粘贴时，浏览器会自动将元素归入SVG命名空间处理，因此能正常显示。

解决方案 #

创建SVG元素必须使用document.createElementNS()，指定SVG的官方命名空间http://www.w3.org/2000/svg。同时，xlink:href属于旧版属性，现代浏览器推荐直接使用href，若需兼容旧环境可同时保留两者。

修改后的代码如下：

const importLogo = document.querySelector('input#import-logo')

function encodeImageFileAsURL(){ // 由HTML输入元素的onchange触发
    var file = importLogo.files[0]
    var reader = new FileReader()

    reader.readAsDataURL(file)

    reader.onloadend = function() {
        // 使用SVG命名空间创建image元素
        let logoImg = document.createElementNS('http://www.w3.org/2000/svg', 'image')
        // 现代浏览器用href属性
        logoImg.setAttribute('href', reader.result)
        // 兼容旧浏览器，添加xlink命名空间的href属性
        logoImg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', reader.result)
        
        logoImg.setAttribute('height', '1000')
        logoImg.setAttribute('width', '3000')
        logoImg.setAttribute('x', '0')
        logoImg.setAttribute('y', '0')

        clickedLogoElement.parentNode.appendChild(logoImg)
        clickedLogoElement.remove()
    }
}

内容的提问来源于stack exchange，提问作者Florian