CODEWITHSUNDEEP
svghtml2canvascanvg
Kennan Obura
Kennan Obura

Reputation: 315

SVG not displayed when using html2canvas

I am working on a project where I need to generate a pdf file (onclick saveFile as PDF) on the client side as some data are not to be sent to the server. I have read about these options available; fileSaver.js and html2canvas, and none seem to help. I also want to point out that I am not so good with javascript. Here is my js code

<script type="text/javascript">
    $(document).ready(function() {
        $("#saveOutput").click(function() {
            $("#Screenshot").html2canvas({ 
                onrendered: function(canvas) {
                    var png = canvas.toDataURL()
                    window.open(png);
                }
            });
        });
    });
</script>

and my Html

<div id="Screenshot">
    <p>This is it</p>
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" style="height: 250px; width: 250px;">       
          <circle id="1" cx="100" cy="100" r="25" fill="#A52A2A"></circle>
    </svg>
</div>
<div id="content">
    <a class="button" id="saveOutput" href="#">Save as File</a>
</div>

Why cant it shows the SVG file? How can these files be converted to Canvas?could someone shows me with code sample? Any help will be appreciated.

Upvotes: 17

Views: 35619

Answers (5)

Mani Afschar Yazdi
Mani Afschar Yazdi

Reputation: 23

in my case I had a margin-top, which moved the svg outside of the visible area (worked perfect in html). Maybe helpful for someone... just replace margin by padding of the parent element.

Upvotes: 0

mimetyped
mimetyped

Reputation: 21

Faced the same issue.

Moved all the CSS into a container element (div) and applied the CSS (in my case, position:absolute;) to the container element instead of the svg element.

As Isabella Lopes has pointed out correctly, height and width need to be applied as attributes and not styles.

Upvotes: 2

Isabella Lopes
Isabella Lopes

Reputation: 546

Like already said in other answers: the latest html2canvas support svg elements.

But apparently CSS is not applied and has a bug when is set the css "width" style and svg "width" attribute.

Before the screenshot, I added a treatment to svg elements.

var svgElements = document.body.querySelectorAll('svg');
svgElements.forEach(function(item) {
    item.setAttribute("width", item.getBoundingClientRect().width);
    item.setAttribute("height", item.getBoundingClientRect().height);
    item.style.width = null;
    item.style.height= null;
});

Edit: added height based on comment

Upvotes: 35

Raghavenda Rai K
Raghavenda Rai K

Reputation: 179

  • Solution 1 : You can use latest html2canvas which will support svg elements.
  • Solution 2 : Before calling html2canvas function you can convert all existing svg elements into canvas elements, which is supported by html2canvas. For this conversion you can use canvg.js.

Upvotes: 7

jay
jay

Reputation: 1175

try to download the latest version of html2canvas on the following link

https://github.com/niklasvh/html2canvas/releases

at the moment it's version 0.5.0-alpha1

i tried it and it works for me.

Upvotes: -1

Related Questions