Created attachment 282693 [details] A case which shows the issue. When copying either via the API or using Command-C, from the attached sample, and then pasting into Mail.app, the circular pie-chart shows black. There is possibly an additional bug where the sample also shows only one pie chart but on loading in Safari shows two. Not sure why. Perhaps it's evaluating the JavaScript code a second time?
Another way to reproduce this is to go to https://gionkunz.github.io/chartist-js/ and copy the charts and paste into Mail.app. It shows up as black shapes, i.e. without styles applied.
Created attachment 282701 [details] Example of copying into Mail.app from chartist-js website.
Tried copying from Chrome.. issue was still similar.
Created attachment 282702 [details] Results of copying from Chrome.
If the issue is similar from Chrome and Safari, i.e. the pasteboard content is similar but rendering is broken in both instances, is the problem related to how the pasteboard content is rendered? I assume webkit is responsible for rendering in Mail.app? Could it be a sandbox-related issue? I also noticed for the web archive, quick look was generating some odd previews. For example, when the preview was the thumbnail type, the shape was black. But when pressing spacebar to open quick look preview, it rendered correctly. Odd.
Managed to work around the issue by traversing the SVG DOM and using getComputedStyle to apply fill and other related CSS properties as inline styles. Then, copying works. Here is a simple example of the code I used: function embedSVGStyle(element) { Array.prototype.forEach.call(element.children, function(child) { embedSVGStyle(child); }); var computedStyle = getComputedStyle(element); element.style.fill = computedStyle.fill; } Attached is a picture showing it working.
Created attachment 282705 [details] Example showing inline stylesheets working.