<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.4/path-data-polyfill.min.js"></script> <svg viewBox="-10 -10 20 20"> <title>This is for Path parser</title> <desc>This is for Path parser and an example</desc> <style> path {fill:gold; stroke:blue;stroke-width:.2;} line {stroke:gray;stroke-width:.02;fill:none;} </style> <defs></defs> <g id="g1" transform="translate(0,0)"> <path id="path1" d="M0,0 Q10,0 10,10 Q5,10 0,0"/> </g> </svg> <script> var NS="http://www.w3.org/2000/svg"; const path = document.querySelector('#path1'); console.log(path) const data = path.getPathData(); console.log(data); data[0].values[0] data[0].values[1] data[1].values[0] data[1].values[1] data[1].values[2] data[1].values[3] var line=document.createElementNS(NS,'line'); line.setAttribute('x1',data[0].values[0]); line.setAttribute('y1',data[0].values[1]); line.setAttribute('x2',data[1].values[0]); line.setAttribute('y2',data[1].values[1]); var svg=document.querySelector('svg') svg.getElementById('g1').appendChild(line); var line=document.createElementNS(NS,'line'); line.setAttribute('x1',data[1].values[0]); line.setAttribute('y1',data[1].values[1]); line.setAttribute('x2',data[1].values[2]); line.setAttribute('y2',data[1].values[3]); var svg=document.querySelector('svg') svg.getElementById('g1').appendChild(line);; var line=document.createElementNS(NS,'line'); line.setAttribute('x1',data[1].values[2]); line.setAttribute('y1',data[1].values[3]); line.setAttribute('x2',data[2].values[0]); line.setAttribute('y2',data[2].values[1]); var svg=document.querySelector('svg') svg.getElementById('g1').appendChild(line);; var line=document.createElementNS(NS,'line'); line.setAttribute('x1',data[2].values[0]); line.setAttribute('y1',data[2].values[1]); line.setAttribute('x2',data[2].values[2]); line.setAttribute('y2',data[2].values[3]); var svg=document.querySelector('svg') svg.getElementById('g1').appendChild(line);; </script> <script> var g1=document.getElementById('g1'); var clone1=g1.cloneNode(true); clone1.id="g2"; console.log(clone1); clone1.style="transform-box:fill-box;transform-origin:0% 0%;transform:rotate(90deg);"; svg.appendChild(clone1); var clone2=g1.cloneNode(true); console.log(clone2); clone2.id="g3"; clone2.style="transform-box:fill-box;transform-origin:0% 00%;transform:rotate(180deg);"; svg.appendChild(clone2); var clone3=g1.cloneNode(true); console.log(clone3); clone3.id="g4"; clone3.style="transform-box:fill-box;transform-origin:0% 00%;transform:rotate(-90deg);"; svg.appendChild(clone3); </script>
반응형
'svg' 카테고리의 다른 글
svg paper.js ellipse:move event and trace (0) | 2024.02.25 |
---|---|
svg paper.js sine curve: onDoubleClick event; (0) | 2024.02.23 |
svg transform matrix: transform attribute value (0) | 2024.02.20 |
svg viewBox: using viewBox matters. (0) | 2024.02.18 |
svg paper.js : star (1) | 2024.02.08 |