svg 包含 foreignobject 标签 不能正常显示

[cgaof]

使用环境

uniapp
使用：2.4.2 版本

问题描述

svg 包含 foreignobject 标签 不能正常显示

复现方式

富文本的代码
<section data-role="block" style=";width: 677px;margin-top:0;margin-left:0;grid-row-start:1;grid-column-start:1;height:max-content;line-height:0;font-size: 16px; display: block; margin: 460.359px 0px 0px; padding: 0px; outline: 0px; visibility: visible; overflow-wrap: break-word !important;box-sizing:border-box;transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);" class="_135editor"> <svg style="max-width: 100% !important;display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible;box-sizing:border-box;" viewbox="0 0 677 26" xml:space="default"> <foreignobject data-role="block-content" height="100%" width="100%"> <section data-role="paragraph" class="" style="margin: 0;padding: 0em; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; visibility: visible;"> <p style="padding: 0em;margin: 0em; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; clear: both; min-height: 1em; visibility: visible;text-align:center;" align="center"> <span style="padding: 0em;margin: 0em; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; font-size: 0.875em; letter-spacing: 0.0625em; color: #6797cf; visibility: visible;"><span class="" data-brushtype="text" style="padding: 0em;margin: 0em; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; font-size: 0.875em; letter-spacing: 0.0625em; caret-color: red; visibility: visible;">—&nbsp;“文艺轻骑兵·欢笑送万家”文艺演出&nbsp;—</span></span> </p> </section> </foreignobject> </svg> </section>

编译出的代码
<uni-rich-text data-v-8845ff2f="" user-select="false" style="max-width: 100%; grid-row-start: 1; grid-column-start: 1;"><div><div data-v-8845ff2f="" class="_135editor" style="width: 677px; height: max-content; line-height: 0; font-size: 16px; display: block; margin: 460.359px 0px 0px; padding: 0px; outline: 0px; visibility: visible; overflow-wrap: break-word; box-sizing: border-box; transform: scale(1);"><img data-v-8845ff2f="" src="data:image/svg+xml;utf8,<svg viewBox=&quot;0 0 677 26&quot; xml:space=&quot;default&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><foreignobject style=&quot;width:100%;height:100%&quot;><div style=&quot;margin:0;padding:0em;outline:0px;max-width:100%;box-sizing:border-box;overflow-wrap:break-word;visibility:visible&quot;><p style=&quot;text-align:center;padding:0em;margin:0em;outline:0px;max-width:100%;box-sizing:border-box;overflow-wrap:break-word;clear:both;min-height:1em;visibility:visible&quot;><span style=&quot;padding:0em;margin:0em;outline:0px;max-width:100%;box-sizing:border-box;overflow-wrap:break-word;font-size:0.875em;letter-spacing:0.0625em;color:%236797cf;visibility:visible&quot;><span style=&quot;padding:0em;margin:0em;outline:0px;max-width:100%;box-sizing:border-box;overflow-wrap:break-word;font-size:0.875em;letter-spacing:0.0625em;caret-color:red;visibility:visible&quot;>—&nbsp;“文艺轻骑兵·欢笑送万家”文艺演出&nbsp;—</span></span></p></div></foreignobject></svg>" ignore="T" style="display: inline-block; width: 100%; vertical-align: top; line-height: 1.6; overflow: visible; box-sizing: border-box; max-width: 100% !important;"></div></div></uni-rich-text>

[jasonHG]

@jin-yufeng foreignobject 标签包含img标签 也会显示不了图片 以下代码无法渲染

<section data-role="block" style="width: 100%;margin-top: 0%;margin-left: 0%;grid-row-start: 1;grid-column-start: 1;height: max-content;max-width: 100% !important;line-height: 0; display: block; font-size: 16px;box-sizing:border-box;transform:     scale(1);-webkit-transform:     scale(1);-moz-transform:     scale(1);-o-transform:     scale(1);"
         class="_135editor">
    <svg style="max-width: 100% !important;display: inline-block; width: 100%;  line-height: 1.6; overflow: visible;box-sizing:border-box;"
         viewBox="0 0 375 297" xml:space="default">
        <foreignObject data-role="block-content" height="100%" width="100%">
            <img data-role="target" style="width: 100%; vertical-align : top;vertical-align:inherit;box-sizing:border-box;max-width: 100% !important;"
                 src="https://bcn.135editor.com/files/images/editor_styles/b1de3c432d5d6c51c7a74f8fd3d1d4aa.png"
                 draggable="false" />
        </foreignObject>
    </svg>
</section>

[Charmve]

@jin-yufeng foreignobject 标签包含img标签 也会显示不了图片 以下代码无法渲染

<section data-role="block" style="width: 100%;margin-top: 0%;margin-left: 0%;grid-row-start: 1;grid-column-start: 1;height: max-content;max-width: 100% !important;line-height: 0; display: block; font-size: 16px;box-sizing:border-box;transform:     scale(1);-webkit-transform:     scale(1);-moz-transform:     scale(1);-o-transform:     scale(1);"
         class="_135editor">
    <svg style="max-width: 100% !important;display: inline-block; width: 100%;  line-height: 1.6; overflow: visible;box-sizing:border-box;"
         viewBox="0 0 375 297" xml:space="default">
        <foreignObject data-role="block-content" height="100%" width="100%">
            <img data-role="target" style="width: 100%; vertical-align : top;vertical-align:inherit;box-sizing:border-box;max-width: 100% !important;"
                 src="https://bcn.135editor.com/files/images/editor_styles/b1de3c432d5d6c51c7a74f8fd3d1d4aa.png"
                 draggable="false" />
        </foreignObject>
    </svg>
</section>

@jasonHG 请问现在有解决方案了吗 我也遇到该问题

[BornHuman131]

同问，SVG中带有元素会无法显示，部分内容会错位显示！希望有大神给出解决办法