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

Fix ID replacements not being performed in style elements #59

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

fortinmike
Copy link

Problem

svg-inject does not add suffixes to IDs located in style elements; it only replaces url(#id) references. This breaks styles and animations such as those exported by SVGator due to "standalone" IDs not being suffixed, when the makeIdsUnique option is enabled.

Fix

Replace the regex for id replacements in the style element with a more generalized one that matches #id as well as url(#id) (as before).

Although this is a much more generalized regex, as far as I know this shouldn't cause issues with fancy CSS syntax.

Example

Original SVG

<style>
    <![CDATA[#emVKjsoi9OL2 {animation: emVKjsoi9OL2_c_o 8000ms linear 1 normal forwards}@keyframes emVKjsoi9OL2_c_o { 0% {opacity: 0} 2.5% {opacity: 1} 100% {opacity: 1}} #emVKjsoi9OL3 {animation: emVKjsoi9OL3_c_o 8000ms linear 1 normal forwards}@keyframes emVKjsoi9OL3_c_o { 0% {opacity: 0} 83.75% {opacity: 0} 86.25% {opacity: 1} 100% {opacity: 1}} #emVKjsoi9OL4 {animation: emVKjsoi9OL4_s_do 8000ms linear 1 normal forwards}@keyframes emVKjsoi9OL4_s_do { 0% {stroke-dashoffset: 500} 2.5% {stroke-dashoffset: 500} 99.875% {stroke-dashoffset: 50} 100% {stroke-dashoffset: 50}}]]>
</style>

After injection with unfixed svg-inject

Styles stay exactly the same after injection, disconnecting styles from the now-suffixed elements in the SVG body.

After injection with this pull request

<style>
    <![CDATA[#emVKjsoi9OL2--inject-1 {animation: emVKjsoi9OL2_c_o 8000ms linear 1 normal forwards}@keyframes emVKjsoi9OL2_c_o { 0% {opacity: 0} 2.5% {opacity: 1} 100% {opacity: 1}} #emVKjsoi9OL3--inject-1 {animation: emVKjsoi9OL3_c_o 8000ms linear 1 normal forwards}@keyframes emVKjsoi9OL3_c_o { 0% {opacity: 0} 83.75% {opacity: 0} 86.25% {opacity: 1} 100% {opacity: 1}} #emVKjsoi9OL4--inject-1 {animation: emVKjsoi9OL4_s_do 8000ms linear 1 normal forwards}@keyframes emVKjsoi9OL4_s_do { 0% {stroke-dashoffset: 500} 2.5% {stroke-dashoffset: 500} 99.875% {stroke-dashoffset: 50} 100% {stroke-dashoffset: 50}}]]>
</style>

@fortinmike
Copy link
Author

Oh and by the way I also added a .nvmrc file because the svg-inject gulp task fails on recent node.js versions. I hope that's OK. I did not do further tests to see which maximum version of node.js svg-inject works with, but node.js 10.5.0 is fine. Feel free to change that to a more appropriate version.

@beaulieufrancois
Copy link

Great! Works on my app.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants