From 7def6eecbf3d7f17d8ad2f00f6e393d43473c6b6 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Mon, 13 Oct 2025 18:15:38 +0530 Subject: [PATCH] fix: correct viewBox casing in radar and packet diagram on-behalf-of: @Mermaid-Chart --- packages/mermaid/src/diagrams/packet/renderer.ts | 2 +- packages/mermaid/src/diagrams/radar/renderer.ts | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 25445a228..95226cf12 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -16,7 +16,7 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const svgWidth = bitWidth * bitsPerRow + 2; const svg: SVG = selectSvgElement(id); - svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`); + svg.attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`); configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth); for (const [word, packet] of words.entries()) { diff --git a/packages/mermaid/src/diagrams/radar/renderer.ts b/packages/mermaid/src/diagrams/radar/renderer.ts index 7324a3a44..247ded66d 100644 --- a/packages/mermaid/src/diagrams/radar/renderer.ts +++ b/packages/mermaid/src/diagrams/radar/renderer.ts @@ -2,6 +2,7 @@ import type { Diagram } from '../../Diagram.js'; import type { RadarDiagramConfig } from '../../config.type.js'; import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { RadarDB, RadarAxis, RadarCurve } from './types.js'; const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { @@ -53,11 +54,9 @@ const drawFrame = (svg: SVG, config: Required): SVGGroup => x: config.marginLeft + config.width / 2, y: config.marginTop + config.height / 2, }; - // Initialize the SVG - svg - .attr('viewbox', `0 0 ${totalWidth} ${totalHeight}`) - .attr('width', totalWidth) - .attr('height', totalHeight); + configureSvgSize(svg, totalHeight, totalWidth, config.useMaxWidth ?? true); + + svg.attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`); // g element to center the radar chart return svg.append('g').attr('transform', `translate(${center.x}, ${center.y})`); };