Convert HTML to DOCX <svg> tag issue with text inside

Good day! I’m trying to convert a small HTML document

Here is a part of HTML related to shape:

<p ff_has_style="Normal" style="direction:ltr;margin-top:0pt;margin-right:0pt;margin-bottom:8pt;margin-left:0pt;font-size:11pt;"><span style="direction:ltr;display:block; height:14.49076pt; "><span style="position: absolute ;left:calc((100% - 451.3pt)/2 + 0pt - 72pt); top:66.05pt;z-index: 1; font-size:0;"><svg width="144pt" height="52pt" style="overflow: visible; "><rect fill="#F4B183" x="0pt" y="0pt" height="50pt" width="142pt"></rect><foreignObject style="position: absolute ;height:50pt; width:142pt; overflow: visible; z-index: 1; "><p ff_has_style="Normal" style="direction:ltr;text-align:center; margin-top:0pt;margin-right:0pt;margin-bottom:0pt;margin-left:0pt;font-size:11pt;"><span></span></p><div style="height:inherit;width:inherit;display:flex;flex-wrap: wrap;align-content: center;justify-content: center;direction:ltr;"><bdi style="direction:ltr;"><span style="direction:ltr;"><span class="txt0_9a48191ae80044ef954c6392f551334b" style="font-size:11pt;font-family:Calibri;color:black;">Burlington Textiles Corp of </span></span></bdi><bdi style="direction:ltr;"><span style="direction:ltr;"><span class="txt0_9a48191ae80044ef954c6392f551334b">America</span></span></bdi></div><p></p></foreignObject></svg></span></span></p>

using Aspose.Words, but I’m getting this (shape doesn’t contain text):

Can you help me, please?

Regards,
Andrew

@andrew.go Could you please attach a whole HTML you are using as an input? The attached snippet does not allow us to test the scenario. We will check the issue on our side and provide you more information.

Sure, here you go:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="generator" content="(Docomotion Engine;V12.5.034.0M3)" />
    <meta name="keywords" content="9a48191ae80044ef954c6392f551334b" />
    <script type="text/javascript">
function assignValue(sourceId, destinationId, fieldType){try {var source = document.getElementById(sourceId); var destination = document.getElementById(destinationId);switch(fieldType){case 'XMV_INTERACTIVE_CHECKBOX':var setVal = 'Off'; if(source.checked == true) setVal = 'on';destination.value = setVal;break;case 'XMV_INTERACTIVE_RADIOBUTTON':if(source.checked == true) {destination.value = sourceId.replace('_outForm', '');}break;case 'XMV_INTERACTIVE_LISTBOX':destination.value = "";for (i = 0; i < source.length; i++) {if (source[i].selected == true) {destination.value += source[i].value + "\n";}}break;case 'XMV_ISINTERACTIVE_UPLOADFILEBUTTON':case 'XMV_INTERACTIVE_UPLOADFILEBUTTON':for (var i = 0; i < filesToUpload.length; ++i) {document.getElementById('UPLOADFILEDICTFIELD' + filesToUpload[i].field).value += (filesToUpload[i].file + '*:|');};break;default:destination.value = source.value;break;}}catch(e){ console.log(e); console.log(sourceId); console.log(document.getElementById(sourceId)); console.log(destinationId); console.log(document.getElementById(destinationId))  } }function radioCleanUp(groupName, elementId){var elements = document.getElementsByName(groupName);for(var radElem in elements){radElem.checked = false;}radioSetSelected(elementId);}function radioSetSelected(elementId){var ele = document.getElementById(elementId); console.log(elementId);
    ele.checked = true;
    }function submitForm(msg, action, theButton){if(checkMandatoryFields() && allMandatoryFieldsFilled()){var theForm = document.getElementById('9a48191ae80044ef954c6392f551334b');theForm.action = theForm.action + '/' + action;theForm.submit();theButton.disabled = true;}else {alert(msg);}}function ShowMsg(msg)
    {
    alert(msg);
    }function ShowMsg(msg)
    {
    alert(msg);
    }function checkMandatoryFields() {return true;}function allMandatoryFieldsFilled() {return true;}</script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
var api_ip = '10.30.61.209';
    if(typeof(AutoFontPickers) !=='undefined'){AutoFontPickers.valuesSeparator='___SFDataSplitter_';AutoFontPickers.dateFormat = AutoFontPickers.convertCSMask('dd/MM/yyyy');AutoFontPickers.timeFormat = AutoFontPickers.convertCSMask('HH:mm');}</script>
    <style type="text/css">
        .txt0_9a48191ae80044ef954c6392f551334b {
            font-size: 11pt;
            font-family: Calibri;
            color:;
        }
    </style>
    <title></title>
</head>
<body>
    <form id="9a48191ae80044ef954c6392f551334b" method="post" action="" enctype="multipart/form-data"><div style="absolute  left:0 ;right:0 ;bottom:0;top:72pt;"><div style="position: relative;"><div style="max-width:451.3pt;margin:0 auto"><section ff_sect_id="section1"><p ff_has_style="Normal" style="direction:ltr;margin-top:0pt;margin-right:0pt;margin-bottom:8pt;margin-left:0pt;font-size:11pt;"><span><bdi style="direction:ltr;"><span style="direction:ltr;"><span class="txt0_9a48191ae80044ef954c6392f551334b">Simple form with shape</span></span></bdi></span></p><p ff_has_style="Normal" style="direction:ltr;margin-top:0pt;margin-right:0pt;margin-bottom:8pt;margin-left:0pt;font-size:11pt;"><span style="direction:ltr;display:block; height:14.49076pt; "><span style="position: absolute ;left:calc((100% - 451.3pt)/2 + 0pt - 72pt); top:66.05pt;z-index: 1; font-size:0;"><svg width="144pt" height="52pt" style="overflow: visible; "><rect fill="#F4B183" x="0pt" y="0pt" height="50pt" width="142pt" /><foreignobject style="position: absolute ;height:50pt; width:142pt; overflow: visible; z-index: 1; "><p ff_has_style="Normal" style="direction:ltr;text-align:center; margin-top:0pt;margin-right:0pt;margin-bottom:0pt;margin-left:0pt;font-size:11pt;"><span><div style="height:inherit;width:inherit;display:flex;flex-wrap: wrap;align-content: center;justify-content: center;direction:ltr;"><bdi style="direction:ltr;"><span style="direction:ltr;"><span class="txt0_9a48191ae80044ef954c6392f551334b" style="font-size:11pt;font-family:Calibri;color:black;">Burlington Textiles Corp of </span></span></bdi><bdi style="direction:ltr;"><span style="direction:ltr;"><span class="txt0_9a48191ae80044ef954c6392f551334b">America</span></span></bdi></div></span></p></foreignobject></svg></span></span></p></section></div></div></div></form>
</body>
</html>

@andrew.go Thank you for additional information.
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): WORDSNET-25996

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

Thanks Alexey!

I think we have “Paid Support Services”. Is there a way to transfer this issue when I’ll get access to our subscription account?

@andrew.go You should escalate the issue in the Paid Support Helpdesk . Then my colleagues from Paid Support team will raise the issue priority.

Thanks Alexey!

1 Like

@andrew.go We have completed analysis of the issue. HTML inside SVG is not supported by Aspose.Words. This feature doesn’t look very popular and we cannot add support for it without extensive redesign of Aspose.Words’ internals, so we are going to close this issue with the “Won’t Fix” resolution. Please accept our apologies for your inconvenience.
By the way, MS Word also doesn’t support <foreingObject> elements in SVG.

The issues you have found earlier (filed as WORDSNET-25996) have been fixed in this Aspose.Words for .NET 24.1 update also available on NuGet.