为啥这个 SVG 中的渐变显示为黑色？

Posted 2023-03-06

【中文标题】为啥这个 SVG 中的渐变显示为黑色？

【英文标题】：Why are the gradients in this SVG displaying as black?为什么这个 SVG 中的渐变显示为黑色？

【发布时间】：2014-11-16 13:31:56

【问题描述】：

我制作了一个 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">
      .st0fill:url(#accend_1_);
      .st1fill:url(#decend_1_);
      .st2fill:#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"  />
      <rect id="stalk" x="280.3" y="519.9" class="st2"  />
    </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">
        .st0fill:url(#accend_1_);
        .st1fill:url(#decend_1_);
        .st2fill:#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 -->

【问题讨论】：

Yes 在 html 中是内联的。我在页面上使用了两次“K”SVG，一次使用了徽标。你能解释一下你认为 ID 是如何冲突的吗？我不完全明白。

【参考方案1】：

如果在浏览器中查看时 SVG 看起来不错，则不太可能是 SVG 本身。

我首先怀疑的是你的 web 应用中的 JS 和/或你在页面上包含 SVG 的方式。

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

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

【参考方案2】：

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