Skip to content
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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Imported SVGs incorrectly share the same fill definitions #10357

Closed
6 of 7 tasks
ArthurFlag opened this issue Jul 31, 2024 · 1 comment
Closed
6 of 7 tasks

Imported SVGs incorrectly share the same fill definitions #10357

ArthurFlag opened this issue Jul 31, 2024 · 1 comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution closed: duplicate This issue or pull request already exists in another issue or pull request

Comments

@ArthurFlag
Copy link
Contributor

ArthurFlag commented Jul 31, 2024

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • I have read the console error message carefully (if applicable).

Description

I've imported 3 SVGs, and it would appear the fill color definition is used across the SVGs, if that fill has the same id, even though the svg files themselves don't share the same id.

Reproducible demo

See demo

Steps to reproduce

  1. See the reproducible. Notice the 3 SVGs have the same color.
  2. Open the SVG files themselves in your browser, notice they actually don't have the same color.
  3. Change the order of the SVG on the md page and notice how they will all use the color of the first SVG used on the page.

It appears that they all get a fill defined as fill="url(#a)", even though this is not the name of the fill in the original svg in the img folder. Maybe that's the reason? That id is then shared by all components on the page?

Expected behavior

They shouldn't share colors.

Actual behavior

The fill used across SVGs is the fill of the first SVG used on the page.

Your environment

  • Docusaurus version used: ^3.4.0

Self-service

  • I'd be willing to fix this bug myself.
@ArthurFlag ArthurFlag added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Jul 31, 2024
@Josh-Cena
Copy link
Collaborator

Duplicate of #8297

@Josh-Cena Josh-Cena marked this as a duplicate of #8297 Jul 31, 2024
@Josh-Cena Josh-Cena closed this as not planned Won't fix, can't repro, duplicate, stale Jul 31, 2024
@Josh-Cena Josh-Cena added closed: duplicate This issue or pull request already exists in another issue or pull request and removed status: needs triage This issue has not been triaged by maintainers labels Jul 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution closed: duplicate This issue or pull request already exists in another issue or pull request
Projects
None yet
Development

No branches or pull requests

2 participants