31:T45a,function highlight(p, c) { p.append("rect") .attr("fill", c) .attr("opacity", 0.2) .attr("width", "100%") .attr("height", "100%") .attr("stroke", "black"); if (true) { corner(p, "0", "0", "red"); corner(p, "100%", "0", "green"); corner(p, "0", "100%", "blue"); corner(p, "100%", "100%", "purple"); } p.append("line") .attr("x1", "50%") .attr("y1", 0) .attr("x2", "50%") .attr("y2", "100%") .attr("stroke", "black") .attr("stroke-dasharray", 5, 5); p.append("line") .attr("x1", 0) .attr("y1", "50%") .attr("x2", "100%") .attr("y2", "50%") .attr("stroke", "black") .attr("stroke-dasharray", 5, 5); // p.append("path") // .attr("d", `M${w / 2} 0V${h}`) // .attr("stroke", "black") // .attr("stroke-dasharray", 5, 5); // p.append("path") // .attr("d", `M0 ${h / 2}H${w}`) // .attr("stroke", "black") // .attr("stroke-dasharray", 5, 5); return p; function corner(g, x, y, c) { g.append("circle") .attr("r", 10) .attr("fill", c) .attr("cx", x) .attr("cy", y); } }32:T1159,parrot = ` `33:[] 2f:{"title":"SVG viewport, viewBox, and preserveAspectRatio","cells":[{"id":0,"value":"md`# SVG viewport, viewBox, and preserveAspectRatio`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"{\n const canvas = d3\n .select(DOM.svg(width, height))\n .attr(\"overflow\", overflow)\n ;\n highlight(canvas, \"blue\");\n const paper = canvas\n .append(\"svg\")\n .attr(\"overflow\", overflow)\n .attr(\"viewBox\", `${minX} ${minY} ${w} ${h}`)\n .attr(\n \"preserveAspectRatio\",\n `${preserveAspectRatio ? `${xAlign}${yAlign}` : \"none\"} ${({\"Full/Meet\": \"meet\", \"Fill/Slice\": \"slice\"})[reference]}`\n );\n highlight(paper, \"green\");\n paper.append(\"g\")\n .attr(\"id\", \"parrot\")\n .html(parrot);\n return canvas.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"~~~js\npreserveAspectRatio = ${preserveAspectRatio ? xAlign + yAlign : \"none\"} ${({\"Full/Meet\": \"meet\", \"Fill/Slice\": \"slice\"})[reference]}\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":488,"value":"viewBox = [minX, minY, w, h]","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"aspectRatiosRatio = +(width / height / (w / h)).toFixed(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof w = Inputs.range([0, 2 * width], {step: 10, value: 800, label: \"ViewBox Width\"})\n// \"Stretch or shrink the width of the viewBox—causes the image to extend beyond the viewBox’s edges when smaller than the image’s width.\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof h = Inputs.range([10, 2 * height], {label: \"ViewBox Height\", step: 10, value: 600})\n// \"Stretch or shrink the height of the viewBox—causes the image to extend beyond the viewBox’s edges when smaller than the image’s height.\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"viewof minX = Inputs.range([-2 * width, 2 * width], {label: \"Min X\", step: 1, value: 0})\n// \"Slide the viewBox left or right.\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"viewof minY = Inputs.range([-2 * height, 2 * height], {label: \"Min Y\", step: 1, value: 0})\n// \"Slide the viewBox up or down.\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"viewof preserveAspectRatio = Inputs.toggle({label: \"Preserve Aspect Ratio\", value: \"preserve\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"viewof reference = Inputs.radio([\"Full/Meet\", \"Fill/Slice\"], {label: \"Reference\", value: \"Full/Meet\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof xAlign = Inputs.radio([\"xMin\", \"xMid\", \"xMax\"], {label: \"X Alignment\", value: \"xMid\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof yAlign = Inputs.radio([\"YMin\", \"YMid\", \"YMax\"], {label: \"Y Alignment\", value: \"YMid\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"viewof overflow = Inputs.radio([\"visible\", \"hidden\"], {label: \"Overflow\", value: \"visible\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`### Preserve Aspect Ratio\nWhen the aspect ratio does **not** need to be preserved:\n* the \\`viewBox\\` can be scaled non-uniformly to meet all edges of the \\`viewport\\`, filling it entirely;\n* \\`fill\\` or \\`full\\` and alignment are meaningless and ineffective, since the \\`viewport\\` is always fully filled.\n\nWhen preserving the aspect ratio, the graphic content is uniformly scaled if necessary, such that the element's bounding box exactly matches the viewport rectangle.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`### Meet or Slice\n\\`meet\\` or \\`slice\\` (\\`full\\` or \\`fill\\`) control how the \\`viewBox\\` gets scaled within the \\`viewport\\` and only make sense when the aspect ratio needs to be preserved.\n\n\\`meet\\` (*default*): the \\`viewBox\\` is scaled uniformly to be fully visible in the \\`viewport\\`, meeting its opposing edges, leaving an empty area if the respective aspect ratios differ.\n\n\\`slice\\`: the \\`viewBox\\` is scaled to fill the entire \\`viewport\\`, slicing off or clipping part of the \\`viewBox\\` that extends beyond the viewport if the respective aspect ratios differ.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`### Aligment within the viewport\nControl the alignment of the \\`viewBox\\` within the \\`viewport\\`. Only meaningful and effective when the aspect ratio needs to be preserved.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"{\n const viewportAspectRatio = width / height;\n const viewBoxAspectRatio = w / h;\n const widerOrTaller = viewportAspectRatio / viewBoxAspectRatio;\n return md`\n| Area | Aspect ratio |\n| - | - |\n| \\`viewport\\` | ${viewportAspectRatio.toFixed(\n 2\n )} | \n| \\`viewBox\\` |${viewBoxAspectRatio.toFixed(2)}|\n| meaningful alignment | ${\n widerOrTaller == 1\n ? \"none\"\n : widerOrTaller > 1\n ? \"**X** only\"\n : \"**Y** only\"\n } |\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"md`---\n## Imports & Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"height = Math.ceil(((width / 16) * 9) / 10) * 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"md`The SVG parrot illustration used is a freebie from [Freepik](http://freepik.com).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}