CODEWITHSUNDEEP
javascriptsvgpathfillhtml2canvas
Christoph
Christoph

Reputation: 31

html2canvas in Safari not rendering Javascript style.fill on SVG path

I am trying to fix this issue: in Apple Safari, my <div id="wrap"> is being rendered correctly as expected using html2canvas except any SVG path e.g. <path id="test"> I have modified with Javscript using:

document.getElementById('test').style.fill = 'blue';

The PNG file is being downloaded correctly in Firefox and Chrome on both Mac and PC. However, in Safari (on both desktop and mobile devices) the PNG file is being downloaded unchanged.

I ran out of ideas on how to make this work in Safari.

I created this example while following the basic principle I am using on my website:

  1. The site is showing a black triangle.
  2. Upon clicking on "Click Me!" the path is filled with "blue" and the PNG is being downloaded.

On Safari, the downloaded PNG file shows a black triangle while on all other browsers, the PNG file shows the blue triangle as it is shown on the screen.

This is my example using the html2canvas.min.js library:

function saveCanvas() {
  document.getElementById('test').style.fill = 'blue';
  html2canvas(document.querySelector("#wrap"))
    .then(canvas => {
      var image = canvas.toDataURL("image/png")
          .replace("image/png", "image/octet-stream");
      var a = document.createElement('a');
      a.href = image;
      a.download = 'image.png';
      a.click();
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<div id="wrap">
  <svg height="210" width="400">
    <path id="test" d="M150 0 L75 200 L225 200 Z" />
  </svg>
</div>
<div onclick="saveCanvas();"> Click Me!</div>

Upvotes: 3

Views: 1718

Answers (1)

yoshi44
yoshi44

Reputation: 21

https://github.com/niklasvh/html2canvas/issues/1543

// Not working.
$('#canvas svg .BODY').css('fill', 'blue');
// Working.
$('#canvas svg').append('<style type="text/css">.BODY{fill:blue;}</style>');

Upvotes: 2

Related Questions