2b:null 2c:["$","title",null,{"children":"Hacky Relative Positioning in SVG | Eli Holder | Observable"}] 31:[] 2f:{"id":"147e80d1cb1b528b","slug":"hacky-relative-positioning-in-svg","title":"Hacky Relative Positioning in SVG","thumbnail":"d2e87c11fb1fd6c799ec4c05ff93fd111fe0c4bfad817f94e46fb2c69cdabf88","access_level":"public","create_time":"$D2020-10-01T17:47:50.746Z","update_time":"$D2020-10-01T18:04:21.250Z","view_time":null,"first_public_time":"$D2020-10-01T18:04:47.361Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"58eacf8e202aa99c","login":"elibryan","name":"Eli Holder","avatar_url":"https://avatars-next.observableusercontent.com/f42ede38e59d5fab5318c3a05de38dc47c2f88ee4bd796d32ced88733e2b8d50","tier":"starter_2024"},"version":42,"publish_version":42,"role":null,"authored":false,"authors":[{"type":"individual","id":"d17a47a44abf3446","login":"elibryan","name":"Eli Holder","avatar_url":"https://avatars-next.observableusercontent.com/f42ede38e59d5fab5318c3a05de38dc47c2f88ee4bd796d32ced88733e2b8d50","tier":null}],"members":[{"type":"individual","id":"d17a47a44abf3446","login":"elibryan","name":"Eli Holder","avatar_url":"https://avatars-next.observableusercontent.com/f42ede38e59d5fab5318c3a05de38dc47c2f88ee4bd796d32ced88733e2b8d50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hacky Relative Positioning in SVG","cells":[{"id":0,"value":"md`# Hacky Relative Positioning in SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"{\n const elementsToStack = [\n svg``,\n // Padding\n svg``,\n svg``,\n svg`Here's some text`,\n svg``\n ];\n\n const stackedElements = positionRelatively(elementsToStack);\n\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"/**\n * Given an array of elements, wrap each with a\n * tag positioned to be below the bounding boxes\n * of the previous elements\n */\npositionRelatively = (elements, params) => {\n params = params || {};\n const spacing = params[\"spacing\"] || 0;\n\n // Wrap the elements in the positioned groups\n let wrappedElements = [];\n let accumulatedHeight = 0;\n elements.forEach(el => {\n // Position element relative to previous elements\n const wrappedElement = svg`\n\n${el}\n`;\n wrappedElements.push(wrappedElement);\n\n // Update the accumulated height based on this element\n const elementBBox = getPrerenderedBBox(el);\n accumulatedHeight += elementBBox.y + elementBBox.height + spacing;\n });\n\n return svg`\n\n${wrappedElements.map(el => svg`${el}`)}\n\"`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"/**\n * Get an element's bounding box by adding it to the dom\n * calculating the bbox, then removing it from the dom\n * Should probably be used with caution...\n * https://talk.observablehq.com/t/getbbox/1222/3\n */\ngetPrerenderedBBox = svgElement => {\n // Defensive copy in case element is already used\n svgElement = svgElement.cloneNode(true);\n\n const renderedSVG = html`\n`;\n\n // Add the SVG element to the DOM so we can determine its size.\n document.body.appendChild(renderedSVG);\n\n // Computing the bounding box of the content.\n const box = renderedSVG.querySelector(\"[name=content]\").getBBox();\n\n // Remove the SVG element from the DOM.\n renderedSVG.remove();\n\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"