Question

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

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

SVG无法在Firefox中渲染（最新版本）

1 个答案: