SVG 未在 Firefox 中呈现（最新版本）[关闭]答案

【问题标题】：SVG not rendering in Firefox (latest version) [closed]SVG 未在 Firefox 中呈现（最新版本）[关闭]
【发布时间】：2015-03-24 09:04:09
【问题描述】：

查看 StackOverflow 上的其他答案并尝试更改 <g></g>, <clientpath/>, 等但没有运气。 SVG 不会在 Firefox (v 36.0.4) 中呈现

这里是html代码：

<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>

【问题讨论】：

您的<g> 元素严重不匹配。你打开一个，然后你打开第二个，然后关闭第二个，然后你有一个自关闭标签，然后你有另一组打开/关闭标签，然后你关闭第一个 <g> 元素。但是你打开另一个然后关闭它两次。有关更易于理解的表示，请参见此处：jsfiddle.net/4auheggj
我美化了代码汤，因此您可以看到多个<g> 滥用，正如@TylerH 解释的那样，等待审核批准。
@DeDee 我应该先这样做，因为它让问题很清楚，虽然很清楚，哈哈。
谢谢@TylerH。此标记由 Telerik 的 Kendo Chart (chart.kendoChart({})) 自动生成。不能用它做任何事情。我将升级到最新的 Telerik 版本，看看它是否可以解决错误。
@dotnetter 当然，这是可以理解的。尽管在使用大量代码提出问题时，最好尝试在您的问题中美化它以使其可读。这可能会在您按下“询问”之前解决您的问题:-)

标签： css html firefox svg

【解决方案1】：

您的 svg 代码有错误，组标签未正确打开/关闭。此外，还有一些似乎打错了 (<g/>)。下面的代码是有效的，因此您可以用作参考。

<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>

【讨论】：

这可能会解决问题，但您不会任何详细说明错误是什么以及您的答案如何解决这些错误。请考虑添加细节以帮助解释代码墙。
@TylerH 我没有指出错误，因为。正如您在评论中指出的那样，标签一团糟。有了一段工作代码，他就可以进行比较，看看哪里出了问题。我发现这对我来说是最有效的过程，但如果我的回答不够清楚，我深表歉意。
@JoeConlin - 当我发表评论时，我会将 Telerik kendo 升级到最新版本，看看 KendoChart 的 autogen 标记是否得到修复。
@JoeConlin 是的，如果他的代码可以美化为看起来像您的代码，那么并排比较可能会有所帮助。尽管我的意思不一定是“逐行”解释。只是比“您的代码有错误。使用这个”更具描述性。像“你的代码中有额外的结束标签。我在下面的代码中删除了它们：”
@JoeConlin 太棒了。谢谢