项目中 需要 做一些 html很难做的图形 奔着 多一事不如少一事 直接用svg去实现 用字符串拼接去搞svg 然后内嵌到 img标签里面本来好好的但是 貌似一些复杂的svg不支持

比如这个

这个用

<svg width="15" height="50"
    xmlns="http://www.w3.org/2000/svg">
    <text font-size="14" fill="#d50000">
        <tspan x="3" y="10">↑</tspan>
        <tspan x="0" y="20">v1</tspan>
        <tspan x="3" y="30">↓</tspan>
    </text>
</svg>

内嵌写法

<img class="fit-picture" src="data:image/svg+xml,%3Csvg width='50' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext font-size='14' fill='%23d50000'%3E%3Ctspan x='3' y='10'/%3E %3Ctspan x='0' y='20'%3Ev1%3C/tspan%3E %3Ctspan x='3' y='30'/%3E%3C/text%3E%3C/svg%3E" alt="Grapefruit slice atop a pile of other slices">

这样子就没有换行的字符了 不知道为什么但是base编码以后就没有问题 就在我用字符串拼接加base64编码的时候又报错
js报错

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. at <anonymous>:1:1

经过我的仔细查询原来是 浏览器自带的base64 编码函数btoa不支持utf-8 我也是无语了
如果用第三方base64 可以支持utf-8 自带的不支持 不知道说啥