Closed cgaof closed 7 months ago
@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>
@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 请问现在有解决方案了吗 我也遇到该问题
使用环境
uniapp
使用:2.4.2 版本
问题描述
svg 包含 foreignobject 标签 不能正常显示
复现方式
富文本的代码 `
编译出的代码
<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="0 0 677 26" xml:space="default" xmlns="http://www.w3.org/2000/svg"><foreignobject style="width:100%;height:100%"><div style="margin:0;padding:0em;outline:0px;max-width:100%;box-sizing:border-box;overflow-wrap:break-word;visibility:visible"><p style="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"><span style="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"><span style="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">— “文艺轻骑兵·欢笑送万家”文艺演出 —</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>