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

Question

我已经制作了一个svg并将其添加到我的页面但是它有一些相当不寻常的行为，因为页面正在加载我可以在页面上看到SVG（看起来很好的渐变显示，见下图。还有我2个SVG文件一个徽标和另一个“K＆＃39;加载后隐藏”。

页面加载后，由于某种原因，渐变消失，我留下黑色上升和下降。 （见下文）

但事情变得越来越奇怪，好像我点击绿色圆圈按钮，它会导致侧栏折叠Angular然后隐藏＆＃39; Logo＆＃39; SVG并显示＆＃39; K＆＃39; SVG。我只需要打一次这个切换，它正确地解决了渐变问题。我可以隐藏＆＃39; K＆＃39; ＆安培;展示＆＃39; Logo＆＃39;再一次，一切都很好。请参阅下面的切换隐藏/显示侧边栏后的图像。

这是SVG Code也许它是什么东西呢？我真的很喜欢这方面的帮助，这是非常奇怪的行为，我不确定如何解决它。

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

＆＃39; K＆＃39; 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。

我的第一个怀疑是您的网络应用程序中的JS和/或您在页面上包含SVG的方式。

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

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

Answer 2

您在每个SVG片段的html文件中有多个具有相同id值的元素，例如，您有两个linearGradient个元素都有id="accend_1_"这是无效的。所有id值在文件中必须是唯一的。