为什么我的SVG标记和渐变defs被覆盖？

Question

当我的SVG在我的网页中时，我的SVG的渐变和标记定义似乎被覆盖了。页面上没有其他SVG。

但是当我把SVG带出页面时，它看起来很好。

这是此示例中的SVG。

<svg  xmlns="http://www.w3.org/2000/svg" height="500" width="800">
  <style>
  svg .node.species {
    stroke: #FFB800;
    stroke-width: 3px;
    size: 300px;
  }
  svg .node.reaction {
    stroke: #8089F7;
    opacity: 0;
    stroke-width: 1.5px;
  }
  svg .link {
    stroke: black;
    stroke-width: 3px;
  }
  svg .link.modifier {
    stroke-dasharray: 5, 5;
  }
  svg .node-label {
    font-size: 14px;
    font-family: Georgia;
    font-weight: bolder;
    text-anchor: middle;
    dominant-baseline: middle;
  }
  /*  svg .node.selected {
    stroke: #FF0000;
  }
  svg .link.selected {
    stroke: #FF0000;
  }*/
  svg marker {
    overflow: visible;
  }
  svg .null-symbol {
    fill: none;
    stroke: black;
    stroke-width: 3px;
  }
  </style>
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="#FFDC9E"></stop>
      <stop offset="95%" stop-color="#FFF"></stop>
    </linearGradient>
    <linearGradient id="markerGradient">
      <stop offset="5%" stop-color="rgb(97, 116, 255)"></stop>
      <stop offset="95%" stop-color="#FFF"></stop>
    </linearGradient>
    <linearGradient id="reactionGradient">
      <stop offset="5%" stop-color="#B0C0FF"></stop>
      <stop offset="95%" stop-color="#FFF"></stop>
    </linearGradient>
    <marker case-sensitive="refX,refY" id="production" viewBox="0 0 10 10"   markerWidth="10" markerHeight="10" orient="auto" refx="-2" refy="0" refX="-2" refY="0">
      <path fill="url(#markerGradient)" stroke="#0013FF" transform="rotate(-90)"  d="M0,2.0808957251439084L2.4028114141347543,-2.0808957251439084 -2.4028114141347543,-2.0808957251439084Z"></path>
    </marker>
    <marker case-sensitive="refX,refY" id="degradation" viewBox="0 0 10 10"   markerWidth="10" markerHeight="10" orient="auto" refx="-2" refy="0" refX="-2" refY="0">
      <path fill="url(#markerGradient)" stroke="#0013FF" transform="rotate(-90)"  d="M0,2.0808957251439084L2.4028114141347543,-2.0808957251439084 -2.4028114141347543,-2.0808957251439084Z"></path>
    </marker>
    <marker case-sensitive="refX,refY" id="modifier" viewBox="0 0 10 10" markerWidth="30" markerHeight="30"   orient="auto" refx="-0.4" refy="0" refX="-0.4" refY="0">
      <path stroke="black" stroke-width="0.3" fill="none"  d="M0,0.5641895835477563A0.5641895835477563,0.5641895835477563 0 1,1 0,-0.5641895835477563A0.5641895835477563,0.5641895835477563 0 1,1 0,0.5641895835477563Z"></path>
    </marker>
  </defs>
  <g  transform="translate(, )scale(1)">
    <g>
      <line    class="reaction production link"  marker-end="url(#production)" x1="449.9996697164325" y1="218.45791860388687" x2="451.42692033038736" y2="246.7481154723436">
      </line><line    class="reaction production link"  marker-end="url(#production)" x1="399.21583821133174" y1="309.0153067725509" x2="345.33989421522693" y2="338.2824980727582">
      </line>
    </g>
    <g>
      <line    class="reaction reactant link"     x1="446.9075572254284" y1="157.1677217354301" x2="449.9996697164325" y2="218.45791860388687">
      </line><line    class="reaction reactant link"     x1="453.0917822074366" y1="279.7481154723436" x2="399.21583821133174" y2="309.0153067725509">
      </line>
    </g>

    <g>

    </g>
    <g draggable=""   transform="translate(446.9075572254284,157.1677217354301)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
      <rect  class="species node"      fill="url(#gradient)"  x="-50" y="-15" width="100" height="30" ry="15">
        <title>ID: S1, Name: S1</title>
      </rect>
      <text class="node-label">S1</text>
    </g><g draggable=""   transform="translate(453.0917822074366,279.7481154723436)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
      <rect  class="species node"      fill="url(#gradient)"  x="-50" y="-15" width="100" height="30" ry="15">
        <title>ID: S2, Name: S2</title>
      </rect>
      <text class="node-label">S2</text>
    </g><g draggable=""   transform="translate(345.33989421522693,338.2824980727582)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
      <rect  class="species node"      fill="url(#gradient)"  x="-50" y="-15" width="100" height="30" ry="15">
        <title>ID: S3, Name: S3</title>
      </rect>
      <text class="node-label">S3</text>
    </g>
    <g draggable=""   transform="translate(473.4770117242872,216.74146493626216)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
      <circle  class="node reaction"  fill="url(#reactionGradient)"  r="5">
        <title>ID: reaction1, Name: reaction1</title>
      </circle>
      <text class="node-label"></text>
    </g><g draggable=""   transform="translate(409.9633485910613,329.9478703486097)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
      <circle  class="node reaction"  fill="url(#reactionGradient)"  r="5">
        <title>ID: reaction2, Name: reaction2</title>
      </circle>
      <text class="node-label"></text>
    </g>
  </g>
</svg>

编辑1

这是linearGradient元素的样式

编辑2

defs元素的样式

编辑3

我发现当我删除head标记，然后重新应用它时，SVG就会被正确呈现。怪异。

Answer 1

原来我在<base href="/">中遇到了head，这让事情搞得一团糟。