CODEWITHSUNDEEP
svg
Dan Allan
Dan Allan

Reputation: 35265

SVG image not displayed, possibly obscured

I am an SVG novice. Is it obvious why the image is not visible?

<svg width="480" height="320" class="canvas">
  <g transform="translate(60,31.999999999999993)" width="372" height="248" class="main">
    <rect width="372" height="248" class="bgc8fcd31365f041fdba82105b45bba1541" fill="transparent"></rect>
    <g transform="translate(0,248)" class="axesc8fcd31365f041fdba82105b45bba1541 x axis">
      <g class="tick" transform="translate(338.1028735788505,0)" style="opacity: 1;">
        <line y2="6" x2="0"></line>
        <text y="9" x="0" dy=".71em" style="text-anchor: middle;">-200</text>
      </g>
      ... more like <g>...</g> above ...
      <path class="domain" d="M-6,0H0V248H-6"></path>
    </g>
    <clipPath id="clipc8fcd31365f041fdba82105b45bba1541">
      <rect x="0" y="0" width="372" height="248"></rect>
    </clipPath>
    <g clip-path="url(#clipc8fcd31365f041fdba82105b45bba1541)">
      <image x="0" y="0" width="300" height="300" src="data:image/png;base64,[redacted very long strict of data characters]"></image>
    </g>
  </g>
</svg>

The image source is fine: using Chrome's Inspect Element feature, I can view it on its own in a separate tab.

Upvotes: 0

Views: 84

Answers (1)

Sirko
Sirko

Reputation: 74086

The SVG <image> element is slightly different from the HTML one as the attribute src is replaced by xlink:href.

So try the following code:

<image x="0" y="0" width="300" height="300" xlink:href="data:image/png;base64,[redacted very long strict of data characters]" />

with an accordingly defined xlink namespace.

xmlns:xlink= "http://www.w3.org/1999/xlink"

Upvotes: 1

Related Questions