SVG not rendering in Firefox (latest version) [closed] - css

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Looked at other answers on StackOverflow and tried changing the <g></g>, <clientpath/>, etc but no luck. The SVG doesnt render in Firefox (v 36.0.4)
Here is the html code:
<td role="gridcell">
<span class="entity-chart k-chart" data-role="chart" style="position: relative;">
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; overflow: hidden;">
<defs>
<clipPath id="fd1ba3a5-b043-4aea-bf23-6263c8c364dd">
<path fill="none" stroke-linejoin="miter" stroke="#000" d="M14 5 L 594 5 594 19 14 19Z"/>
</clipPath>
<linearGradient gradientUnits="objectBoundingBox" y2="1" x2="0" y1="0" x1="0" id="e6d64ff2-2146-408e-b1ed-924e26e7da59">
<stop style="stop-color:#fff;stop-opacity:0;" offset="0"/>
<stop style="stop-color:#fff;stop-opacity:0.3;" offset="0.25"/>
<stop style="stop-color:#fff;stop-opacity:0;" offset="1"/>
</linearGradient>
</defs>
<g>
<path fill="none" stroke="none" d="M0 0 L 600 0 600 25 0 25Z"/>
<path fill="none" stroke="none" d="M14 5 L 594 5 594 19 14 19Z"/>
<g><g/>
<g/>
<g><g/>
</g>
<g clip-path="url(#fd1ba3a5-b043-4aea-bf23-6263c8c364dd)">
<g transform="matrix(1,0,0,1,0,0)">
<path fill-opacity="1" fill="#0055cc" stroke-opacity="1" stroke-width="1" stroke="#0044a3" d="M14.5 9.5 L 409.5 9.5 409.5 15.5 14.5 15.5Z"/>
<path fill="url(#e6d64ff2-2146-408e-b1ed-924e26e7da59)" stroke="none" d="M14.5 9.5 L 409.5 9.5 409.5 15.5 14.5 15.5Z"/>
</g>
</g>
<g>
<text fill-opacity="1" fill="#000" stroke="none" y="12" x="5" style="font:12px Arial,Helvetica,sans-serif;">
<tspan/>
</text>
</g>
</g>
<g/>
<g/>
<g/>
<g opacity="1">
<path fill="none" stroke="none" d="M413.455 9.2 L 446.455 9.2 446.455 14.8 413.455 14.8Z"/>
<text fill-opacity="1" fill="#000" stroke="none" y="15.999999999999998" x="417.45454545454544" style="font:11px Arial,Helvetica,sans-serif;">
<tspan>75 %</tspan>
</text>
</g>
</g>
</svg>
</span>
</td>

Answer 1

Your svg code has errors with the group tags not being properly opened/closed. Additionally, there are a couple that seem to be mistyped (<g/>). The code below is valid so you can use as a reference.
<td role="gridcell">
<span class="entity-chart k-chart" data-role="chart" style="position: relative;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1500 1000" enable-background="new 0 0 1500 1000" xml:space="preserve">
<g>
<path fill="none" d="M0,0h600v25H0V0z"/>
<path fill="none" d="M14,5h580v14H14V5z"/>
<g>
<g>
<defs>
<rect id="SVGID_1_" x="14" y="5" width="580" height="14"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_2_)">
<g transform="matrix(1,0,0,1,0,0)">
<path fill="#0055CC" stroke="#0044A3" d="M14.5,9.5h395v6h-395V9.5z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="0.5" y1="1000" x2="0.5" y2="999" gradientTransform="matrix(395 0 0 -6 14.5 6009.5)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="0.25" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<path fill="url(#SVGID_3_)" d="M14.5,9.5h395v6h-395V9.5z"/>
</g>
</g>
</g>
</g>
<g>
<path fill="none" d="M413.5,9.2h33v5.6h-33V9.2z"/>
<text transform="matrix(1 0 0 1 417.4546 16)" font-family="'ArialMT'" font-size="11">75 %</text>
</g>
</g>
</svg>
</span>
</td>