New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: blank space on top/bottom when export image/svg #567
base: develop
Are you sure you want to change the base?
Conversation
鉁旓笍 Deploy Preview for mermaidjs ready! 馃敤 Explore the source changes: 8675947 馃攳 Inspect the deploy log: https://app.netlify.com/sites/mermaidjs/deploys/61d6bda13e5f9e0007a50605 馃槑 Browse the preview: https://deploy-preview-567--mermaidjs.netlify.app |
@@ -14,6 +14,7 @@ | |||
svg?.setAttribute('width', `${width}px`); // Workaround https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage | |||
if (!svg) { | |||
svg = document.querySelector('#container svg'); | |||
svg.removeAttribute('height'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm wondering if removing the height attribute would cause any other issues?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
More detail I posted on issue.
When you not have height
, browser will re-calculate new height
from element inside svg
element.
So, diagram will fit inside.
When edit new code, height
will back to large number. This code block affect only for save action
You can test with data I put in issue
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, If you have any idea, we can discuss.
My solution only fix for export function. But I think problem from render function first.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some VSCode plugin support preview mermaid diagram have same problem, so I think it's from main mermaid.js. Not about live editor
This pr is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days |
This pr is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 14 days |
馃搼 Summary
Remove blank space on top/bottom when export image/svg
Resolves #566
馃搹 Design Decisions
Before export image, svg. Remove
height
attribute onsvg
element.So browser when re-calculate new fitable height.
馃搵 Tasks
Make sure you
develop
branch