<!doctype html>
<html>
<head>
<style>
canvas,svg {
width:800px;
height:800px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var circle1= new Path.Circle({center:view.center,
radius:100,strokeColor:"red"});
var star1= new Path.Star({center:view.center,points:5,radius1:50,radius2:150})
star1.strokeColor="black";
var parts=circle1.divide(star1);
for (var i=0;i<parts.children.length;i++){
if(i==5){
parts.children[i].translate(100*i-300,100);
parts.children[i].style.fillColor="gold";
console.log(parts.children[i]);
console.log(parts.children.length);
}
}
var svg1=document.querySelector("#svg1");
svg1.appendChild(project.activeLayer.exportSVG());
var anim1=document.createElementNS("http://www.w3.org/2000/svg","animateTransform");
anim1.setAttribute('attributeName',"transform");
anim1.setAttribute('type',"rotate");
anim1.setAttribute('values',"0;360");
anim1.setAttribute('begin',"0");
anim1.setAttribute('dur',"3s");
anim1.setAttribute('repeatCount',"10");
svg1.appendChild(anim1);
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js getPart : divide and conquer (0) | 2024.03.08 |
|---|---|
| svg paper.js getOffsetsWithTangent(): (0) | 2024.03.06 |
| svg boolean operation : divide! (0) | 2024.02.29 |
| svg paper.js clipped: group (3) | 2024.02.28 |
| svg raster; (1) | 2024.02.27 |
