JSFiddle - React, Tailwind, and code Playground

by Jerther

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.5/html2canvas.js"></script>
<svg>
  <marker id="arrowEnd" markerHeight="9" markerWidth="9" refX="8" refY="3" viewBox="0 0 9 6" orient="auto-start-reverse" markerUnits="userSpaceOnUse"><path d="M0,0 L0,6 L9,3 z"></path></marker>
  <polyline depId="1" points="100,102 100,68.5 130,68.5"></polyline>
</svg>

CSS

svg {
  width: 200px;
  height: 150px;
}

svg polyline {
  fill: transparent;
  stroke: #bbb;
  stroke-width: 2px;
  marker-start: url(#arrowEnd);
}

JavaScript

function applyStyleToSvg(container) {
	for (let svg of container.getElementsByTagName('svg')) {
  	for (let el of svg.getElementsByTagName('*')) {
      s = getComputedStyle(el);
      for (let key of s) {
          let prop = key.replace(/\-([a-z])/g, v => v[1].toUpperCase());
          el.style[prop] = s[key];
      }
    }
  }
}


html2canvas(document.body, {
  onclone: (clonedDoc) => {
  	applyStyleToSvg(clonedDoc);
  },
}).then(canvas => {
  document.body.appendChild(canvas);
});