Why are my SVG marker and gradient defs being overwritten?

Question

The gradient and marker definitions for my SVG appear to get overwritten when my SVG is inside my webpage. There are no other SVGs on the page.

But when I take the SVG out of the page, it looks just fine.

Here is the SVG in this example.

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

EDIT 1

Here is the style of the linearGradient element

EDIT 2

Style of the defs element

EDIT 3

I found that when I remove the head tag, and then reapply it, the SVG is then correctly rendered. Weird.

Answer 1

Turns out I had <base href="/"> in head which was messing things up.