CODEWITHSUNDEEP
jqueryhtmlsvg
Deb
Deb

Reputation: 401

How to put an excel image inside Svg

I want to put an excel image inside a svg . Below is the sample image . I want to replace innerHtml where cssClass name is charts-button with an excel image . Can anyone please help me on this as I am new to HTML 5 . I want to do it using Jquery .

<svg height="330" width="720" xmlns="http://www.w3.org/2000/svg" style="font-family:san-serif, Arial;font-size:12px;" version="1.1">
    <g transform="translate(686,10)" stroke-linecap="round" style="cursor:default;" class="charts-button">
      <title>Chart context menu</title>
      <rect ry="2" rx="2" stroke-width="1" stroke="none" fill="white" strokeWidth="1" height="22" width="24" y="0.5" x="0.5"></rect>
      <path zIndex="1" stroke-width="3" stroke="#666" d="M 6 6.5 L 20 6.5 M 6 11.5 L 20 11.5 M 6 16.5 L 20 16.5" fill="#E0E0E0"></path>
      <text y="13" style="color:black;fill:black;" zIndex="1" x="0"></text>
    </g>

Upvotes: 0

Views: 135

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101868

In order to embed an Excel chart, you would need to either:

a) export it as a bitmap image, then include it using an SVG <image> element, or

b) export the chart as HTML and include it using an SVG <foreignObject> tag.

You can learn more about these tags by reading the SVG specification, or searching for examples on this site, or elsewhere on the web.

Manipulating SVG with jQuery is fraught with difficulties. It is really only designed to work with HTML. It will often do the wrong thing when manipulating SVG elements. You may be better to use one of the JS libraries designed for SVG manipulation, such as Snap, D3 or Raphael.

Upvotes: 1

Related Questions