title: SVG image not displayed, possibly obscured
body: <p>I am an SVG novice. Is it obvious why the <code>image</code> is not visible?</p>
  
  <pre><code>&lt;svg width="480" height="320" class="canvas"&gt;
    &lt;g transform="translate(60,31.999999999999993)" width="372" height="248" class="main"&gt;
      &lt;rect width="372" height="248" class="bgc8fcd31365f041fdba82105b45bba1541" fill="transparent"&gt;&lt;/rect&gt;
      &lt;g transform="translate(0,248)" class="axesc8fcd31365f041fdba82105b45bba1541 x axis"&gt;
        &lt;g class="tick" transform="translate(338.1028735788505,0)" style="opacity: 1;"&gt;
          &lt;line y2="6" x2="0"&gt;&lt;/line&gt;
          &lt;text y="9" x="0" dy=".71em" style="text-anchor: middle;"&gt;-200&lt;/text&gt;
        &lt;/g&gt;
        ... more like &lt;g&gt;...&lt;/g&gt; above ...
        &lt;path class="domain" d="M-6,0H0V248H-6"&gt;&lt;/path&gt;
      &lt;/g&gt;
      &lt;clipPath id="clipc8fcd31365f041fdba82105b45bba1541"&gt;
        &lt;rect x="0" y="0" width="372" height="248"&gt;&lt;/rect&gt;
      &lt;/clipPath&gt;
      &lt;g clip-path="url(#clipc8fcd31365f041fdba82105b45bba1541)"&gt;
        &lt;image x="0" y="0" width="300" height="300" src="data:image/png;base64,[redacted very long strict of data characters]"&gt;&lt;/image&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The image source is fine: using Chrome's Inspect Element feature, I can view it on its own in a separate tab.</p>