为什么此SVG中的渐变显示为黑色？

Question

我做了一个svg并将其添加到我的页面中，但是它具有一些异常的行为，因为页面正在加载，所以我可以在页面上看到SVG（看起来很好，显示的是渐变，请参见下图。我还有2个SVG文件一个徽标，另一个“ K”在加载后被隐藏）。

但是，由于某些原因，页面加载后，渐变消失了，剩下的是黑色的上升者和下降者。（见下文）

但是事情变得更奇怪了，好像我单击绿色圆圈按钮一样，这导致侧栏折叠Angular，然后隐藏“ Logo” SVG并显示“ K” SVG。我只需要按一下此切换开关，即可正确解决渐变问题。我可以隐藏“ K”并再次显示“徽标”，一切都很好。切换下边栏的隐藏/显示后，请参见下图。

这是SVG代码，也许是这样吗？我真的很希望对此有所帮助，这是非常奇怪的行为，我不确定如何解决。

徽标SVG：

<!-- BEGIN LOGO SVG -->
<div class="logo" ng-hide="sidebarCollapsed">
  <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 443.7 1602 312.6" style="enable-background:new 0 443.7 1602 312.6;" xml:space="preserve">
    <style type="text/css">
      .st0{fill:url(#accend_1_);}
      .st1{fill:url(#decend_1_);}
      .st2{fill:#FFFFFF;}
    </style>
    <g id="k"> 
      <linearGradient id="accend_1_" gradientUnits="userSpaceOnUse" x1="-6.7993" y1="1185.7142" x2="42.6791" y2="1114.1494" gradientTransform="matrix(3.135 0 0 -3.135 0 4205.7539)">
        <stop  offset="0" style="stop-color:#55C953"/>
        <stop  offset="0.2752" style="stop-color:#52AC55"/>
        <stop  offset="0.8681" style="stop-color:#49645A"/>
        <stop  offset="1" style="stop-color:#47535B"/>
      </linearGradient>
      <polygon id="accend" class="st0" points="78.4,582.9 78.4,445 0,445 0,707.1 79,582.9   "/>

        <linearGradient id="decend_1_" gradientUnits="userSpaceOnUse" x1="72.7276" y1="1092.825" x2="1.3943" y2="1202.1583" gradientTransform="matrix(3.135 0 0 -3.135 0 4205.7539)">
        <stop  offset="0" style="stop-color:#55C953"/>
        <stop  offset="0.2752" style="stop-color:#52AC55"/>
        <stop  offset="0.8681" style="stop-color:#49645A"/>
        <stop  offset="1" style="stop-color:#47535B"/>
      </linearGradient>
      <polygon id="decend" class="st1" points="146.1,596.7 105,658.2 162.4,749.1 253.6,749.1  "/>
      <polygon id="branch" class="st2" points="78.4,699.2 78.4,750 0.3,750 0.3,707.1 165.2,444.7 247,444.7  "/>
    </g>
    <g id="i_1_">
      <rect id="title" x="280.3" y="443.7" class="st2" width="68.3" height="52"/>
      <rect id="stalk" x="280.3" y="519.9" class="st2" width="68.3" height="228.9"/>
    </g>
    <path id="n" class="st2" d="M541.7,749.1V624c0-25.7-5-47.3-35.7-47.3c-31.7,0-39.2,20.7-39.2,48v124.5h-68.7V520.2h64v24.5h0.9
      c14.4-23.5,34.8-32.3,62.4-32.3c19.4,0,43.6,7.5,58.6,19.8c21.9,18.2,26.3,47,26.3,74v143.3h-68.7V749.1z"/>
    <path id="d" class="st2" d="M830.8,445v94.4c-18.8-19.1-41.7-27.3-68-27.3c-69,0-113.8,55.2-113.8,121.6
      c0,67.7,44.2,122.6,114.4,122.6c27,0,53.9-10.3,68.3-32.3h5.6v21.9h62.7V445H830.8L830.8,445z M774,692.6
      c-34.2,0-57.4-25.7-57.4-58.9s25.1-57.4,58.3-57.4c32.9,0,57.7,24.5,57.7,57.4C832.7,667.2,808.2,692.6,774,692.6z"/>
    <path id="r" class="st2" d="M1015.1,623v125.7h-68.3V519.9h64.3v24.5h0.9c11.9-23.5,31-32.3,57.4-32.3v69
      C1038.9,582,1015.1,587.6,1015.1,623z"/>
    <path id="e" class="st2" d="M1322,637.2c0-69-50.8-125.1-121-125.1c-67.1,0-120.1,56.4-120.1,122.9c0,66.8,54.5,121.3,121.3,121.3
      c51.4,0,91.9-32.3,111.9-79.3H1244c-11.3,15.7-23.2,21.3-41.7,21.3c-27,0-49.5-11.9-53.6-43.3h171.5
      C1321.4,651.9,1322,643.1,1322,637.2z M1149.6,608c5.3-21.9,27.3-39.2,52-39.2c24.8,0,46.7,17.2,52,39.2H1149.6z"/>
    <path id="dlast" class="st2" d="M1533,445v94.4c-18.8-19.1-42.3-27.3-69-27.3c-69,0-114.1,55.2-114.1,121.6
      c0,67.7,44.2,122.6,114.4,122.6c27,0,53.6-10.3,68-32.3h3.8v21.9h65.8V445H1533L1533,445z M1475,692.6c-34.2,0-57.4-25.7-57.4-58.9
      s25.1-57.4,58.3-57.4c33.2,0,57.7,24.5,57.7,57.4C1533.7,667.2,1509.2,692.6,1475,692.6z"/>
    </svg>
  </div>
  <!-- END LOGO SVG -->

'K'SVG：

<!-- BEGIN MARK SVG -->
  <div class="mark" ng-show="sidebarCollapsed">
    <svg version="1.1" id="mark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 444.7 253.6 305.4" style="enable-background:new 0 444.7 253.6 305.4;" xml:space="preserve">
      <style type="text/css">
        .st0{fill:url(#accend_1_);}
        .st1{fill:url(#decend_1_);}
        .st2{fill:#FFFFFF;}
      </style>
      <g id="k">

          <linearGradient id="accend_1_" gradientUnits="userSpaceOnUse" x1="-6.7993" y1="1185.7142" x2="42.6791" y2="1114.1494" gradientTransform="matrix(3.135 0 0 -3.135 0 4205.7539)">
          <stop  offset="0" style="stop-color:#55C953"/>
          <stop  offset="0.2752" style="stop-color:#52AC55"/>
          <stop  offset="0.8681" style="stop-color:#49645A"/>
          <stop  offset="1" style="stop-color:#47535B"/>
        </linearGradient>
        <polygon id="accend" class="st0" points="78.4,582.9 78.4,445 0,445 0,707.1 79,582.9   "/>

          <linearGradient id="decend_1_" gradientUnits="userSpaceOnUse" x1="72.7276" y1="1092.825" x2="1.3943" y2="1202.1583" gradientTransform="matrix(3.135 0 0 -3.135 0 4205.7539)">
          <stop  offset="0" style="stop-color:#55C953"/>
          <stop  offset="0.2752" style="stop-color:#52AC55"/>
          <stop  offset="0.8681" style="stop-color:#49645A"/>
          <stop  offset="1" style="stop-color:#47535B"/>
        </linearGradient>
        <polygon id="decend" class="st1" points="146.1,596.7 105,658.2 162.4,749.1 253.6,749.1  "/>
        <polygon id="branch" class="st2" points="78.4,699.2 78.4,750 0.3,750 0.3,707.1 165.2,444.7 247,444.7  "/>
      </g>
    </svg>
  </div>
  <!-- END MARK SVG -->

Answer 1

如果在浏览器中查看SVG时看起来还不错，那么SVG本身就不太可能。

我首先怀疑的是您的Web应用程序中的JS和/或您在页面中包含SVG的方式。

SVG如何添加到您的页面？是使用< img>或<object>来包含这些内容，还是将它们内嵌在页面中？如果是后者，那么我建议可能的原因是id您的SVG中具有重复的属性。例如，两个SVG都有名为accend_1_和的渐变decend_1_。所有id的都必须是唯一的。尝试给他们提供不同的ID。

如果您没有内联它们，那么请提供有关您如何使用它们的更多信息。