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.

Sign up for GitHub

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

Jump to bottom

A CSS conflict with a style tag within an SVG can occur #944

Closed
dtrucs opened this issue Jul 19, 2023 · 1 comment
Closed

A CSS conflict with a style tag within an SVG can occur #944

dtrucs opened this issue Jul 19, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@dtrucs
Copy link
Collaborator

dtrucs commented Jul 19, 2023

SVG icons from Geotrek-admin are completely loaded in the app and sometimes there is a style tag with selectors to style the SVG (often when the SVG was exported from Illustrator).

The problem arises when there are 2 (or more) SVGs with the same selector label but different property values.

For example :

<body>
  <svg>
     <style>.st0 { fill: blue }</style>
     <path class="st0" d="m 296.75,409.45 c 1.4683,-0.45736 2.2876,-2.0177 1.8302,-3.486 -0.45654,-1.4683 -2.0177,-2.2876 -3.486,-1.831 -1.4683,0.45736 -2.2876,2.0186 -1.8302,3.4868 0.45736,1.4674 2.0177,2.2876 3.486,1.8302" />
  </svg>
  <svg>
     <style>.st0 { fill: red }</style>
     <path class="st0" d="m 296.75,409.45 c 1.4683,-0.45736 2.2876,-2.0177 1.8302,-3.486 -0.45654,-1.4683 -2.0177,-2.2876 -3.486,-1.831 -1.4683,0.45736 -2.2876,2.0186 -1.8302,3.4868 0.45736,1.4674 2.0177,2.2876 3.486,1.8302" />
  </svg>
</body>

Because of the cascading of CSS, the both SVG should be paint in red.
One solution would be to embed the properties in each SVG node like this:

<body>
  <svg>
     <path fill="blue" d="m 296.75,409.45 c 1.4683,-0.45736 2.2876,-2.0177 1.8302,-3.486 -0.45654,-1.4683 -2.0177,-2.2876 -3.486,-1.831 -1.4683,0.45736 -2.2876,2.0186 -1.8302,3.4868 0.45736,1.4674 2.0177,2.2876 3.486,1.8302" />
  </svg>
   <svg>
     <path fill="red" d="m 296.75,409.45 c 1.4683,-0.45736 2.2876,-2.0177 1.8302,-3.486 -0.45654,-1.4683 -2.0177,-2.2876 -3.486,-1.831 -1.4683,0.45736 -2.2876,2.0186 -1.8302,3.4868 0.45736,1.4674 2.0177,2.2876 3.486,1.8302" />
  </svg>
</body>

Perhaps this optimization should be done once when the icon is uploaded to Geotrek-admin? (maybe related to GeotrekCE/Geotrek-admin#3359)
@dtrucs dtrucs added the bug Something isn't working label Jul 19, 2023
This was referenced Jul 24, 2023
Closed
Merged
@dtrucs
Copy link
Collaborator Author

dtrucs commented Aug 8, 2023

Fixed since 3.15.0.

@dtrucs dtrucs closed this as completed Aug 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@dtrucs