如何在页面渲染期间更改颜色 SVG？

Question

First of all I know how to change the color of SVG dynamically. I have used the solution from this question:

jQuery SVG image replacement

But my scenario is different.

On my page I have several icons (SVGs) and there is a color picker. The user can change the of icons using colorpicker. All works fine.

Now I want to generate the PDF of the whole page with the color of icons selected by the user.

I am using third party PDF generation library that takes my page URL and generates the PDF of that. But the problem is that the color does not get applied to the icons and PDF is generated. I know the cause of this problem because as on document ready I convert all the SVG img tags to actual SVG tags and then apply the color to them chosen by the user. This all happens after the page has rendered.

But the PDF generation library does not wait for this process to complete and generates the PDF before all the SVGs images are converted to SVGs and color is applied to them.

I don't know to first wait for whole process to complete and then generate its PDF.

I have tried caching of the page but that does not help either.

Any help would be highly appreciated. Thanks

Answer 1

I did that.

The solution was to wrap the code in IIFE so that it executes immediately on page load rather than on ready event of the DOM.