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.
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"
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments