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

Change fill and stroke color #13

Open
odedBartov opened this issue May 10, 2021 · 4 comments
Open

Change fill and stroke color #13

odedBartov opened this issue May 10, 2021 · 4 comments

Comments

@odedBartov
Copy link

How can i change the color of the SVG image? It dosent matter what i put in this properties i still stuck with the default color

@SergeyMell
Copy link
Owner

SergeyMell commented Jul 12, 2021

You cannot do it through the properties (at least for now) as long as this functionality has not been implemented yet.
However, you can

  1. Read the file sources
  2. Replace all needed colors according to your business logic
  3. Create and svg source using fromDatafunction like this
    private nsSvgData = `
        <svg ... </svg> // Here is your raw sources of the SVG that you've read from the file
    `;
    svgFile = fromData(this.nsSvgData);
  4. Render changed SVG like
    <SVGImage src="{{svgFile}}" width="335" height="269"><SVGImage>

@SergeyMell
Copy link
Owner

@odedBartov, was my answer helpful for you?

@odedBartov
Copy link
Author

Not really, i want to change just one specific property (Color) of the image in the HTML, but thank you for the information

@xiromoreira
Copy link

If someone else ends here like me, trying to use files and not "inject" the svg in the code. Hope this saves someone's time or gives some ideas.
After looking the source and understanding that won't be a trivial change to do I ended with this workaround based on your response.

Read the svg from assets folder:

  src = path.join(knownFolders.currentApp().path, 'assets', src);
  File.fromPath(src).readText().then(...)

Use a regex (:disappointed:) to replace or add the new attribute. It's not very restrictive, but I expect the base SVGs to be controlled and tested:

const REGEX_FILL = /<svg\s(([\s\w"=]*)(fill="#?\w+"))?/;
...
  svg.replace(REGEX_FILL, (...groups) => groups[2] != null
        ? `<svg ${groups[2]} fill="${fill}"`
        : `<svg fill="${attr}"`;
  );

And finally send the result to SVGImage src using the fromData() as suggested.

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

No branches or pull requests

3 participants