实现svg图在Element+图片预览组件中显示

在 Element UI 的 el-image-viewer 组件中，直接使用 SVG 图片作为源是不直接支持的，因为 el-image-viewer 主要用于查看常规图像格式如 JPG, PNG 等。然而，你可以通过一些变通方法来展示 SVG 图片。

将 SVG 内容转换为 Data URL：

如果你有 SVG 的文本内容，你可以将它转换为 Data URL 并使用它：

javascript 复制代码

const svgContent = `<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>`;

const svgBlob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
const svgUrl = URL.createObjectURL(svgBlob);
const imageList=[svgUrl]

html 复制代码

  <el-image-viewer
    :url-list="imageList"
    :visible.sync="viewerVisible"
    @close="viewerVisible = false">
  </el-image-viewer>

另外如果后端返回的是SVG文本可以这样来操作

首先，你需要将 SVG 文本转换为一个可用的 Data URL。这可以通过编码 SVG 文本并将其格式化为 Data URL 来实现。

javascript 复制代码

const svgText = `<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500" height="751" viewBox="0 0 500 751" xml:space="preserve">
<desc>Created with Fabric.js 5.3.0</desc>
<defs>
<clipPath id="CLIPPATH_3">
    <rect transform="matrix(1 0 0 1 250.5 376)" x="-250" y="-375.5" rx="0" ry="0" width="500" height="751"></rect>
</clipPath>
</defs>
<g clip-path="url(#CLIPPATH_3)">
<g transform="matrix(1 0 0 1 250.5 376)" id="workspace">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(222,179,118); fill-rule: nonzero; opacity: 1;" x="-250" y="-375.5" rx="0" ry="0" width="500" height="751"></rect>
</g>
<g transform="matrix(1 0 0 1 250.5 389.36)" style="" id="issueDate-7e3ad9b1-85d8-469b-80bf-6b1192608bb6">
        <text xml:space="preserve" font-family="SimSun,STSong" font-size="20" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;"><tspan x="-50" y="-7.2772" t="1">2024年04月</tspan><tspan x="-50" y="19.8428">08日</tspan></text>
</g>
<g transform="matrix(1 0 0 1 103.3333 376)" style="" id="ee2682d9-61b2-45a4-887f-bd0801bba0d4">
        <text xml:space="preserve" font-family="SimSun,STSong" font-size="20" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;"><tspan x="-60" y="6.2828" t="1">颁发日期：</tspan></text>
</g>
</g>
</svg>`;

const encodedSvg = encodeURIComponent(svgText);
const dataUrl = `data:image/svg+xml;charset=utf-8,${encodedSvg}`;
const imageList =[dataUrl]

这样就能实现即使手里只有svg图或文本也能用element组件预览它了