3e:null 3f:["$","title",null,{"children":"SVG ctas.map(cta => ({downloadIcon, cta}))); const container = DOM.element("div"); container.style.display = 'flex'; container.style.flexWrap = 'wrap'; const banner = document.getElementById("banner"); permutations.forEach(p => { const permutationContainer = document.createElement("div"); { const $ = d3.select(permutationContainer); $.style('width', '280px'); $.style('height', '280px'); $.style('outline', 'solid 1px white'); $.style("position", "relative"); } const permutation = banner.cloneNode(true); permutation.style.setProperty('--downloadIcon-color', downloadIconColor); { const $ = d3.select(permutation); $.style('width', '280px'); $.style('height', '280px'); $.select('[data-role="use:downloadIcon"]').attr('xlink:href', `#${p.downloadIcon}`); $.select('[data-role="use:cta"]').attr('xlink:href', `#${p.cta}`); } const downloadButton = document.createElement("button"); { const $ = d3.select(downloadButton); $.style("position", "absolute"); $.style("left", "0"); $.style("z-index", "100"); } downloadButton.innerText = "Download" downloadButton.addEventListener('click', () => download(permutation)); permutationContainer.appendChild(permutation); permutationContainer.appendChild(downloadButton); container.appendChild(permutationContainer) }); return container }46:T9dc,48:T499,49:T224f,4a:[] 43:{"id":"aa05aef29a9edc63","slug":null,"title":"SVG `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":468,"value":"function download(svg) {\n removeUseXLinkHref(svg);\n\n\n var serializer = new XMLSerializer();\n var svgStr = serializer.serializeToString(svg);\n var svgBlob = new Blob([svgStr], {type: 'image/svg+xml;charset=utf-8'});\n var svgUrl = URL.createObjectURL(svgBlob);\n var img = new Image();\n img.crossOrigin = 'anonymous';\n var canvas = document.getElementById('canvas');\n var ctx = canvas.getContext('2d');\n \n img.onload = function() {\n setTimeout(() => {\n // Set canvas dimensions to the SVG dimensions\n canvas.width = svg.width.baseVal.value;\n canvas.height = svg.height.baseVal.value;\n \n // Draw the SVG onto the canvas\n ctx.drawImage(img, 0, 0);\n \n // Convert canvas to PNG\n var pngDataUrl = canvas.toDataURL('image/png');\n \n triggerDownload(pngDataUrl);\n }, 100)\n };\n \n img.src = svgUrl;\n return img\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"function removeUseXLinkHref(svg) {\n var useElements = svg.querySelectorAll('use');\n \n useElements.forEach(function(useElement) {\n var refId = d3.select(useElement).attr('xlink:href').slice(1); // remove the '#'\n var refElement = document.getElementById(refId);\n if (refElement) {\n removeUseXLinkHref(refElement);\n var clone = refElement.cloneNode(true);\n\n // Copy attributes from the element to the clone\n for (var i = 0; i < useElement.attributes.length; i++) {\n var attr = useElement.attributes[i];\n if (attr.name !== 'xlink:href') {\n clone.setAttribute(attr.name, attr.value);\n }\n }\n\n useElement.parentNode.replaceChild(clone, useElement);\n }\n });\n var allElements = svg.querySelectorAll('[xlink\\\\:href]');\n allElements.forEach(function(el) {\n el.removeAttribute('xlink:href');\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"function triggerDownload(dataUrl) {\n var downloadLink = document.createElement('a');\n downloadLink.href = dataUrl;\n downloadLink.download = 'image.png';\n document.body.appendChild(downloadLink);\n downloadLink.click();\n document.body.removeChild(downloadLink);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"{\n const svg = document.getElementById(\"banner\")\n return d3.select(svg).select('[data-role=\"icon\"]').select('use').attr('xlink:href', '#download3')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\n

CSS

\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"$46","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"$47","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"$48","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":391,"value":"$49","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"