Skip to content

Instantly share code, notes, and snippets.

@mulderu

mulderu/index.html

Created December 26, 2018 05:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mulderu/3ae2d2d658c467f4bb9afc9f3ebd698d to your computer and use it in GitHub Desktop.
Save mulderu/3ae2d2d658c467f4bb9afc9f3ebd698d to your computer and use it in GitHub Desktop.
Download ZIP
svg copy // source https://jsbin.com/tedatoripu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>svg copy</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style>
.svgOuter { position: relative; width: 1000px; height: 200px; }
svg { position: absolute; }
</style>
</head>
<body>
<div class="svgOuter" id="org">
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="20"/>
<polyline points="100,100 150,25 150,75 200,0"
fill="none" stroke="black" />
<g fill="grey"
transform="rotate(-10 50 100)
translate(-36 45.5)
skewX(40)
scale(1 0.5)">
<path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
</g>
</svg>
</div>
<div class="svgOuter copied">
</div>
<div class="svgOuter copied">
</div>
<script>
function init() {
$('.copied').each(function() {
$(this).append( $('#org>svg').clone() );
console.log('good')
});
}
$(document).ready(init);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment