marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-23 16:04:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7076 from mermaid-js/6919-fix-incorrect-viewBox-casing

Browse Source 
6919: correct viewBox casing in Radar & Packet
This commit is contained in:
Knut Sveidqvist
2025-10-21 12:20:04 +00:00
committed by GitHub
parent 3d768f3adf 33b4946e21
commit fed8a523a4
4 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/chilly-words-march.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Correct viewBox casing and make SVGs responsive

1
cypress/helpers/util.ts
View File

@@ -99,6 +99,7 @@ export const openURLAndVerifyRendering = (
cy.visit(url); cy.visit(url);
cy.window().should('have.property', 'rendered', true); cy.window().should('have.property', 'rendered', true);
cy.get('svg').should('be.visible'); cy.get('svg').should('be.visible');
cy.get('svg').should('not.have.attr', 'viewbox');
if (validation) { if (validation) {
cy.get('svg').should(validation); cy.get('svg').should(validation);

2
packages/mermaid/src/diagrams/packet/renderer.ts
View File

@@ -16,7 +16,7 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
const svgWidth = bitWidth * bitsPerRow + 2; const svgWidth = bitWidth * bitsPerRow + 2;
const svg: SVG = selectSvgElement(id); 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); configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth);
for (const [word, packet] of words.entries()) { for (const [word, packet] of words.entries()) {

9
packages/mermaid/src/diagrams/radar/renderer.ts
View File

@@ -2,6 +2,7 @@ import type { Diagram } from '../../Diagram.js';
import type { RadarDiagramConfig } from '../../config.type.js'; import type { RadarDiagramConfig } from '../../config.type.js';
import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js'; import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
import { configureSvgSize } from '../../setupGraphViewbox.js';
import type { RadarDB, RadarAxis, RadarCurve } from './types.js'; import type { RadarDB, RadarAxis, RadarCurve } from './types.js';
const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
@@ -53,11 +54,9 @@ const drawFrame = (svg: SVG, config: Required<RadarDiagramConfig>): SVGGroup =>
x: config.marginLeft + config.width / 2, x: config.marginLeft + config.width / 2,
y: config.marginTop + config.height / 2, y: config.marginTop + config.height / 2,
}; };
// Initialize the SVG configureSvgSize(svg, totalHeight, totalWidth, config.useMaxWidth ?? true);
svg
.attr('viewbox', `0 0 ${totalWidth} ${totalHeight}`) svg.attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`);
.attr('width', totalWidth)
.attr('height', totalHeight);
// g element to center the radar chart // g element to center the radar chart
return svg.append('g').attr('transform', `translate(${center.x}, ${center.y})`); return svg.append('g').attr('transform', `translate(${center.x}, ${center.y})`);
}; };