2.5.0版本中svg无法显示

[Annanikimi]

使用环境

微信小程序

问题描述

svg图片包含image图片无法显示，文本也不正常显示。

复现方式

复现html片段：

<section data-role="outer" label="edit by 135editor" style="background-color: rgb(243, 255, 217);" data-tplid="126209">
    <section data-tools="135编辑器" data-id="98902">
        <section data-role="layout" style="display: flex; justify-content: center;flex-flow:row nowrap;">
            <section data-role="layout" style="display: inline-block; width: 100%; max-width: 100% !important;" data-width="100%" class="">
                <section data-role="layout-inner">
                    <section>
                        <section data-tools="135编辑器" data-id="105041">
                            <section data-role="absolute-layout" data-mode="svg" data-width="375" data-height="392" data-ratio="1.0453333333333332" style="overflow: hidden; grid-template-rows: 100%; grid-template-columns: 100%; display: grid; width: 100%; max-width: 100% !important;">
                                <section data-role="ratio" style="grid-row-start: 1; grid-column-start: 1; height: 100%;">
                                    <svg viewbox="0 0 375 392" style="pointer-events: none; display: inline-block; width: 100%; vertical-align: top; -webkit-tap-highlight-color: transparent; user-select: none; max-width: 100% !important;" xml:space="default"></svg>
                                </section>
                                <section data-role="block" style="width: 101%; margin-top: -0.8%; margin-left: -0.266668%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 101% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 379 74" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/795cb7add6001821da269d55b51daa35.png" class="" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 101%; margin-top: 77.6%; margin-left: -0.266668%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 101% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 379 101" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/c7770066208987964cce587f18e52ce3.png" class="" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 21%; margin-top: 61.8667%; margin-left: 45.0667%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 21% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 79 105" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/ef3fca989b231d0973a88c53cf4e30fb.gif" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 25%; margin-top: 58.1333%; margin-left: 0.266667%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 25% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 94 96" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/57143e12878e839d74c692b93218ed95.png" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 52%; margin-top: 57.0667%; margin-left: 5.86667%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 52% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 195 178" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/4c2ed8cc71b34b49d267411488bd1bd6.gif" class="" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 39%; margin-top: 50.1333%; margin-left: 57.8667%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 39% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 146 204" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/6b808bd29f9abb8a8306f33c9e0a8a40.png" class="" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 11%; margin-top: 77.6%; margin-left: 3.2%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 11% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 41 41" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/5a15e4201b1591844945c0b4fb77d20f.gif" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 12%; margin-top: 1.33333%; margin-left: 11.7333%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 12% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 45 45" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/5a15e4201b1591844945c0b4fb77d20f.gif" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 19%; margin-top: 79.4667%; margin-left: 46.1333%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 19% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 71 71" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/de783e92e00760dcdcf2226f7f90ac19.gif" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 14%; margin-top: 47.4667%; margin-left: 21.8667%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 14% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 53 62" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/54129d75e911a06a10a94096348b16e2.png" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 10%; margin-top: 77.6%; margin-left: 72.2667%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 10% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 38 32" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/a7a4844bc30d35ee2d23bd565afb3732.png" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 100%; margin-top: 10.6667%; margin-left: 0.266667%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 100% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 375 148" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <section style="margin-right: auto; margin-left: auto; overflow: hidden; padding-top: 0.625em; padding-bottom: 0.625em; text-align: left;">
                                                <section style="display: flex;justify-content: center;align-items: center;" class="">
                                                    <section style="padding: 0.133333em 0.2em; letter-spacing: 0.0333333em; font-size: 1.875em; color: rgb(173, 124, 50);" class="">
                                                        <br/>
                                                    </section>
                                                </section>
                                                <section style="padding: 0em; letter-spacing: 0.0222222em; font-size: 2.8125em; color: rgb(173, 124, 50); text-align: center;" class="">
                                                    <strong class="135brush" data-brushtype="text">阅读悦快乐</strong>
                                                </section>
                                            </section>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 17%; margin-top: 76.5333%; margin-left: 56.8%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; transform: scale(1); max-width: 17% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 64 36" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <img data-role="target" style="overflow: hidden; width: 100%; vertical-align: inherit;" src="https://jrga.gaqrm.com/uploads/20240424/c96ad065a987d0e4c4602d901289f6b5.png" draggable="false"/>
                                        </foreignobject>
                                    </svg>
                                </section>
                                <section data-role="block" style="width: 60%; margin-top: 41.0667%; margin-left: 20.2667%; grid-row-start: 1; grid-column-start: 1; height: max-content; line-height: 0; font-size: 12px; transform: scale(1); max-width: 60% !important;" class="_135editor">
                                    <svg style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; max-width: 100% !important;" viewbox="0 0 225 93" xml:space="default">
                                        <foreignobject data-role="block-content" height="100%" width="100%">
                                            <section data-role="fontmin" style="overflow: hidden; display: inline-block; transform-origin: left top; width: 125%; transform: scale(0.8); max-width: 125% !important;">
                                                <section style="margin-right: auto; margin-left: auto; overflow: hidden; padding-top: 0.625em; padding-bottom: 0.625em; text-align: left;" class="">
                                                    <section style="display: flex;justify-content: center;align-items: center;" class="">
                                                        <section style="width: 2.1875em; align-self: flex-end;" class="">
                                                            <br/>
                                                        </section>
                                                    </section>
                                                    <section style="padding: 0em; letter-spacing: 0.0222222em; font-size: 2.8125em; color: rgb(173, 124, 50); text-align: center;" class="">
                                                        <strong class="135brush" data-brushtype="text">投票结果出炉！</strong>
                                                    </section>
                                                </section>
                                            </section>
                                        </foreignobject>
                                    </svg>
                                </section>
                            </section>
                        </section>
                        <section data-tools="135编辑器" data-id="98902" style="background-color: rgb(158, 216, 132);">
                            <section data-role="layout" style="display: flex; justify-content: center;flex-flow:row nowrap;">
                                <section data-role="layout" style="display: inline-block; width: 100%; max-width: 100% !important;" data-width="100%" class="">
                                    <section data-role="layout-inner">
                                        <section class="">
                                            <section data-id="98902" class="_135editor">
                                                <section data-role="layout" style="display: flex; justify-content: center;flex-flow:row nowrap;">
                                                    <section data-role="layout" style="display: inline-block; width: 100%; max-width: 100% !important;" data-width="100%" class="">
                                                        <section data-role="layout-inner">
                                                            <section class="">
                                                                <section data-tools="135编辑器" data-id="125932">
                                                                    <section style="margin: 10px auto; display: flex; justify-content: center;" class="">
                                                                        <section style="display: flex;">
                                                                            <section style="display: flex;">
                                                                                <section style="color: rgb(51, 51, 51); text-align: center; background-color: rgb(255, 255, 253); display: flex; align-items: center;" class="">
                                                                                    <strong class="135brush" data-brushtype="text"><br/></strong>
                                                                                </section>
                                                                            </section>
                                                                        </section>
                                                                    </section>
                                                                </section>
                                                                <section data-tools="135编辑器" data-id="125923" data-width="90%" style="margin-left: auto; margin-right: auto; width: 90%; flex: 0 0 90%; max-width: 90% !important;">
                                                                    <section style="margin: 25px auto 10px;">
                                                                        <section style="background-color: rgb(255, 255, 255); padding-top: 20px; padding-right: 15px; padding-left: 15px;" class="">
                                                                            <section style="width: 100%; height: 0px; overflow: hidden; max-width: 100% !important;" data-width="100%"></section>
                                                                            <section style="padding-top: 10px; padding-bottom: 10px;" class="">
                                                                                <section style="margin-top: 5px; margin-bottom: 5px; line-height: 2em; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; letter-spacing: 0px;" class="135brush" data-autoskip="1">
                                                                                    <section class="_135editor">
                                                                                        <section style="margin-right: 20px; margin-bottom: 16px; margin-left: 20px; line-height: 2em; text-align: center; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; letter-spacing: 1px;" class="135brush" data-autoskip="1">
                                                                                            <p style="text-align:justify;color: rgb(255, 255, 255); font-size: 14px; line-height: 2em; text-indent: 2.125em;">
                                                                                                <br/>
                                                                                            </p>
                                                                                        </section>
                                                                                    </section>
                                                                                </section>
                                                                            </section>
                                                                        </section>
                                                                    </section>
                                                                </section>
                                                            </section>
                                                        </section>
                                                    </section>
                                                </section>
                                            </section>
                                        </section>
                                    </section>
                                </section>
                            </section>
                        </section>
                    </section>
                </section>
            </section>
        </section>
    </section>
</section>

在开启编辑模式下image标签又出现在了富文本中但是图片无法正常渲染； 非编辑模式下image标签就会丢失

在小程序显示效果：

实际html效果：

[jin-yufeng]

小程序中没有 svg 标签，目前通过转为 dataurl 的图片显示，但是这种方式似乎不支持 svg 中有 img 的情况

<img src='data:image/svg+xml;utf8,<svg viewBox="0 0 379 74" xml:space="default" xmlns="http://www.w3.org/2000/svg"><foreignObject style="width:100%;height:100%"><img data-role="target" style="overflow:hidden;width:100%;vertical-align:inherit" src="https://jrga.gaqrm.com/uploads/20240424/795cb7add6001821da269d55b51daa35.png" draggable="false" xmlns="http://www.w3.org/1999/xhtml"></img></foreignObject></svg>'>

[Annanikimi]

小程序中没有 svg 标签，目前通过转为 dataurl 的图片显示，但是这种方式似乎不支持 svg 中有 img 的情况

<img src='data:image/svg+xml;utf8,<svg viewBox="0 0 379 74" xml:space="default" xmlns="http://www.w3.org/2000/svg"><foreignObject style="width:100%;height:100%"><img data-role="target" style="overflow:hidden;width:100%;vertical-align:inherit" src="https://jrga.gaqrm.com/uploads/20240424/795cb7add6001821da269d55b51daa35.png" draggable="false" xmlns="http://www.w3.org/1999/xhtml"></img></foreignObject></svg>'>

好的，感谢解答