Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Převod SVG na data URL</title> <h1>Převod SVG na data URL</h1> <h2>SVG</h2> <div id="canvas-cover"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="481" height="227"> <image x="0" y="0" width="410" height="228" preserveAspectRatio="none" xlink:href="/i/100"/> <path fill="#ff0000" stroke="#000000" d="M159.5,57.5L425.5,58.5" style="stroke-width: 10px; fill-opacity: 1; stroke-opacity: 0.5;" stroke-width="10" fill-opacity="1" stroke-opacity="0.5"/> <rect onclick="alert(1)" x="272.5" y="144.5" width="180" height="78" r="0" rx="0" ry="0" fill="#ff0000" stroke="#00ff00" style="fill-opacity: 0.3; stroke-width: 2px; stroke-opacity: 1;" stroke-width="2" fill-opacity="0.3" stroke-opacity="1"/> </div> </svg> <h2>Pomocný <code><canvas></code></h2> <canvas id="canvas"></canvas> <xmp></xmp> <button onclick="document.getElementsByTagName('xmp')[0].innerHTML = (canvas.toDataURL())">Vypsat Data URL</button>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
canvas { background: #fff; }
CSS
Autoformát
CSS reset
Až na konci
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var svgCover = document.getElementById('canvas-cover'); var svgSource = svgCover.innerHTML; canvas.width = svgCover.offsetWidth; canvas.height = svgCover.offsetHeight; var img = new Image(); img.src = "data:image/svg+xml," + encodeURIComponent(svgSource); img.onload = function() { context.drawImage( img, 0, 0 ); };
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>