Last active
January 13, 2017 00:13
-
-
Save kimxogus/fcdaae653f4a4fa351de04235ff7863f to your computer and use it in GitHub Desktop.
Align svg elements using getBBox (vanilla script)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Data | |
| var data = [{ | |
| name: 'NODE1', | |
| x: 200, | |
| y: 100 | |
| }, { | |
| name: 'NODE2', | |
| x: 200, | |
| y: 300 | |
| }, { | |
| name: 'NODE3', | |
| x: 400, | |
| y: 200 | |
| }, { | |
| name: '이름이 기이이이이이인 NODE4', | |
| x: 400, | |
| y: 400 | |
| }]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>SVG - BBox</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .node rect { | |
| stroke: skyblue; | |
| stroke-width: 2px; | |
| fill: #fff; | |
| } | |
| .node text { | |
| color: #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg> | |
| <script src="data.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| 'use strict'; | |
| var textMargin = 10; | |
| var svg = document.querySelector('#svg'); | |
| data.forEach(function (d) { | |
| // node group | |
| var node = document.createElementNS('http://www.w3.org/2000/svg', 'g'); // namespace를 이용하여 생성하여야 svg오브젝트를 얻을 수있음! | |
| node.className.baseVal = 'node'; | |
| node.setAttribute('transform', 'translate(' + [d.x, d.y] + ')'); // node 그룹의 기준 좌표 설정 | |
| svg.appendChild(node); | |
| // node label | |
| var text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); | |
| text.textContent = d.name; | |
| // 여기서 getBBox를 호출할 경우, text.getBBox() => { x:0, y:0, width:0, height:0 } | |
| node.appendChild(text); // 여기서 렌더링이 이뤄지므로 렌더링 한 이후에 getBBox를 호출해야함! | |
| var bbox = text.getBBox(); | |
| // text의 x, y 좌표 | |
| text.setAttribute('x', - bbox.width / 2); | |
| text.setAttribute('y', bbox.height / 2); | |
| // node rect | |
| var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); | |
| rect.setAttribute('rx', 5); | |
| rect.setAttribute('ry', 5); | |
| node.insertBefore(rect, text); | |
| // rect의 x, y 좌표 및 크기 설정 | |
| rect.setAttribute('x', bbox.x - bbox.width / 2 - textMargin); | |
| rect.setAttribute('y', bbox.y + bbox.height / 2 - textMargin); | |
| rect.setAttribute('width', bbox.width + textMargin * 2); | |
| rect.setAttribute('height', bbox.height + textMargin * 2); | |
| // 중앙 위치 확인용 circle | |
| var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); | |
| circle.setAttribute('r', 3); | |
| circle.setAttribute('fill', 'red'); | |
| // 중심점의 x, y좌표 | |
| circle.setAttribute('cx', 0); | |
| circle.setAttribute('cy', 0); | |
| node.appendChild(circle); | |
| }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment