Inline SVG markup is not rendered properly

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X, 7.1.X, 7.2.X, Master
• Fix Version/s: 7.0.0 DXP FP95, 7.0.10.15 DXP SP15, 7.0.X, 7.1.10 DXP FP19, 7.1.10.5 SP5, 7.1.X, 7.2.10 DXP FP8, 7.2.10.3 DXP SP3, 7.2.X, 7.3.4 CE GA5, 7.3.10 DXP GA1, Master
• Component/s: JS APIs and Utilities > Frontend JS Web API
• Labels:
  • ee-ts
  • liferay-dxp-70-sp15
  • liferay-dxp-71-sp5
  • liferay-dxp-72-sp3
  • liferay-fixpack-de-95-7010
  • liferay-fixpack-dxp-19-7110
  • liferay-fixpack-dxp-8-7210
• Branch Version/s:
  7.2.x, 7.1.x, 7.0.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Git Pull Request: https://github.com/liferay-frontend/liferay-portal/pull/104

Steps to reproduce:

1. Create a Basic Web Content with the following markup using the editor in HTML mode:

   <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
   .classA { fill:red }
   </style>
   <defs>
   <g id="Port">
   <circle style="fill:inherit" r="10"/>
   </g>
   </defs>
   
   <text y="15">black</text>
   <use x="50" y="10" xlink:href="#Port" />
   <text y="35">red</text>
   <use x="50" y="30" xlink:href="#Port" class="classA"/>
   <text y="55">blue</text>
   <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
   </svg>
   

1. Add a Web Content Display Widget to a Widget Page configured with the Web Content created previously.

Expected result:

• The widget shows three lines with the texts black, red, and blue along with three circles: back, red, and blue.

Actual result:

• The widget shows three lines with the texts black, red, and blue but without the three circles.