SVG foreignObject Not Rendered During HTML to PDF Conversion Using Word Cloud API
Greetings,
We are currently evaluating the Word Cloud API for HTML to PDF conversion and have encountered an issue with the SVG foreignObject tag.
When transforming HTML to PDF using the Word Cloud API, the text inside the SVG foreignObject tag does not render. Various solutions suggested in forum discussions, such as adding x and y coordinates or including the XML namespace in the child div of the SVG, have been attempted, but none have proven effective.
This issue can be reproduced using the demo site at https://products.aspose.cloud/words/java/conversion/
with the attached HTML file"svg_foreignObject.html.zip"(decompress the ZIP file for HTML).
We would appreciate any ideas or solutions to resolve this issue.
For quick reference,
<foreignObject width="650" height="955" >
<div class="highcharts-axis-labels highcharts-xaxis-labels" aria-hidden="true" style="position: absolute; left: 0px; top: 0px; opacity: 1;"><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 38px; visibility: inherit;">Content Set</span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 91px; visibility: inherit;"><span>Jaguar Aims to Set the Pace with Debut of Its Latest Compact SUV</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 144px; visibility: inherit;"><span>Jaguar</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 197px; visibility: inherit;"><span>Jaguar and Porsche Back 'Buy Now, Pay Later' Start-Up for Car Repairs</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 249px; visibility: inherit;"><span>Boost for UK as Jaguar to Create 5,000 New Jobs</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 302px; visibility: inherit;"><span>Jaguar Pursues Electric Avenue</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 355px; visibility: inherit;"><span>Jaguar</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 408px; visibility: inherit;"><span>Jaguar Land Rover to Boost Driveless Car Production</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 460px; visibility: inherit;"><span>Jaguar</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 513px; visibility: inherit;"><span>Power Move: Jaguar Brand to Go All-Electric by 2025</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 566px; visibility: inherit;"><span>Jaguars Win Overshadowed by Protests against Trump</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 619px; visibility: inherit;"><span>Jaguar Parts from China 'Will Run out in Two Weeks'</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 671px; visibility: inherit;"><span>Jaguar Land Rover to Stop Work for a Week in April</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 724px; visibility: inherit;"><span>Jaguar Land Rover Boss Warns Tens of Thousands of Jobs at Risk If No Brexit Deal</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 777px; visibility: inherit;"><span>Korean Backer Puts £300m into Jaguar Hub</span></span><span opacity="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 15px; white-space: nowrap; margin-left: 0px; margin-top: 0px; color: rgb(51, 51, 51); cursor: default; max-width: 0px; transform: rotate(0deg); transform-origin: 0px 14px; text-overflow: clip; opacity: 1; left: 20px; top: 830px; visibility: inherit;"><span>Jaguar</span></span></div>
</foreignObject>
Thanks
svg_foreignObject.html.zip (8.6 KB)