Skip to content

fix(svg): support font-family attribute on SVG text elements - #581

Open
hjl12345 wants to merge 2 commits into
bubkoo:masterfrom
hjl12345:master
Open

fix(svg): support font-family attribute on SVG text elements#581
hjl12345 wants to merge 2 commits into
bubkoo:masterfrom
hjl12345:master

Conversation

@hjl12345

Copy link
Copy Markdown

Description

Modified getUsedFonts function to traverse SVGElement child nodes, and added test cases for SVG text elements with font-family attribute.

Motivation and Context

This PR fixes the issue reported in #534.

When using toPng to export an SVG containing <text> elements with custom fonts (e.g., font-family="zihunlieridangkongti"), the exported PNG does not apply the custom font. The root cause is that getUsedFonts only traverses HTMLElement and ignores SVGElement nodes, so the font-family attribute on SVG text elements is never collected.

This change ensures that fonts set via SVG font-family attribute are properly collected and embedded during the export process.

Closes #534

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Enhancement (changes that improvement of current feature or performance)
  • Refactoring (changes that neither fixes a bug nor adds a feature)
  • Test Case (changes that add missing tests or correct existing tests)
  • Code style optimization (changes that do not affect the meaning of the code)
  • Docs (changes that only update documentation)
  • Chore (changes that don't modify src or test files)

Self Check before Merge

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

hjl12345 added 2 commits May 19, 2026 17:31
Modified the getUsedFonts function to traverse SVGElement child nodes,
so that fonts set via the font-family attribute on SVG text elements can be correctly collected.

Added corresponding test cases and test samples in test\resources\svg-font.
- Modified getUsedFonts function to traverse SVGElement child nodes
- Added test cases for SVG text elements with font-family attribute
- Fixed issue where custom fonts were not applied when exporting SVG to PNG
@biiibooo

biiibooo Bot commented May 19, 2026

Copy link
Copy Markdown
Contributor

👋 @hjl12345

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

  • fix: don't overwrite prevent_default if default wasn't prevented
  • feat: add graph.scale() method
  • docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

  • Follow the TypeScript coding style.
  • Run npm run lint locally to catch formatting errors earlier.
  • Document any user-facing changes you've made.
  • Include tests when adding/changing behavior.
  • Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

@codecov

codecov Bot commented May 19, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.50%. Comparing base (d9b2fcf) to head (9ee9e0f).
⚠️ Report is 26 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #581   +/-   ##
=======================================
  Coverage   66.50%   66.50%           
=======================================
  Files          10       10           
  Lines         612      612           
  Branches      150      150           
=======================================
  Hits          407      407           
  Misses        144      144           
  Partials       61       61           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@hjl12345

Copy link
Copy Markdown
Author

@bubkoo I know you're busy, but could you please review this PR when you have a moment? It fixes the SVG font issue introduced by commit 09bee44. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Font family not exported correctly in PNG

1 participant