2f:T30d6,30:T3813,

New div element

31:[] 2d:{"title":"Control font sizes and stroke-widths when scaling SVGs","cells":[{"id":0,"value":"# Control font sizes and stroke-widths when scaling SVGs\n\nOriginal SVG image:","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":270,"value":"## New DIV","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"viewof div_width = Inputs.range([0, 100], {\n label: \"Div's width in relation to screen size (%)\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof scale = Inputs.range([0.1, 1], {\n label: \"Select scale (in relation to div)\",\n step: 0.1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"**Click _Update SVG_ to update the font-size of the SVG relative to the selected value in the dropdown**","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"viewof fontSize = Inputs.select([8, 10, 12, 14], {\n label: \"Select font-size (default 10)\",\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof strokeSize = Inputs.select([1, 2, 3, 4, 5], {\n label: \"Select stroke width (default 1)\",\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof click_btn = Inputs.button(\"Update SVG\", { reduce: changeSVG })","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$30","pinned":false,"hidden":false,"mode":"html"},{"id":5,"value":"function changeSVG() {\n // original width of SVG\n const svg_original_w = document.getElementById(\"mySVG\").getAttribute(\"width\");\n\n // current width of SVG -- control by CSS and `scale`\n const svg_w = document.getElementById(\"mySVG\").getBoundingClientRect().width;\n\n // ratio of scale\n const ratio = Math.round((100 * svg_w) / svg_original_w) / 100;\n\n // update font size to selection\n d3.select(\"#mySVG\")\n .selectAll(\"text\")\n .style(\"font-size\", (d) => Math.round((100 * fontSize) / ratio) / 100);\n\n // update stroke size to selection\n d3.select(\"#mySVG\")\n .selectAll(\"path\")\n .style(\"stroke-width\", (d) => Math.round((100 * strokeSize) / ratio) / 100);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}