时间戳

首页 > 解决方案 > 当我尝试将 svg 转换为 base64 并提供给图像源但我没有得到确切的字体系列和字体大小

html - 当我尝试将 svg 转换为 base64 并提供给图像源但我没有得到确切的字体系列和字体大小

问题描述

当我尝试将 SVG 转换为 base 64 并提供给图像源时，我没有得到字体大小、字体系列，但是如果我复制 SVG 标记并将其放在 HTML 中，它会正确，但在 base64 之后它将无法工作转换任何人都可以帮助我吗

const svg = `
    <svg viewBox="0 0 ${rects.width} ${rects.height}">
        <text
            x="0"
            y="${Math.floor(
              parseInt(this.typed_form.font_size, 10) * 1.33
            )}"
            font-family="${this.typed_form.font_family}"
            font-size="${this.typed_form.font_size}"
            fill="${this.typed_form.color}"
        >${this.typed_form.value}</text>
    </svg>
  `;
    const div = document.createElement("div");
    const inner_tag = svg.trim();
    div.innerHTML = inner_tag;

    const s = new XMLSerializer().serializeToString(div.firstChild);
    value = `data:image/svg+xml;base64,${window.btoa(s)}`;

<img data-v-302a5f22="" data-v-7a68f144="" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDIuNzE4NzUgNjYiPgogICAgICAgICAgICAgICAgPHRleHQgeD0iMCIgeT0iNDciIGZvbnQtZmFtaWx5PSJOdW5pdG8iIGZvbnQtc2l6ZT0iMzZwdCIgZmlsbD0icmdiKDI0MCwgMjUsIDI1KSI+c2FpcmFtPC90ZXh0PgogICAgICAgICAgICA8L3N2Zz4=" alt="Signature">

标签： htmlcssvue.jssvg

解决方案

推荐阅读