Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for css custom properties/variables?

See original GitHub issue

svgsupports the css custom property syntax.


    --myfill: orange;
    --othefill: purple;


  <svg width="250" height="250" viewBox="0 0 250 250">
    <rect fill="var(--myfill,pink)" x="0" y="0" width="150" height="120"/>

This code will use the --myfill color, if defined, otherwise it will use pink. What I’d like to do is have a fixed, unmodified svg and pass in different values for the given variables to change things at runtime. I looked through the source code and didn’t see anything obvious but does SharpVectors support this? If not, what would be the right area to investigate adding this feature?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

qsc-jhndnncommented, Apr 22, 2020

@paulushub sounds good. I’m not a regex superstar but here’s some example code which extracts what’s needed. The pattern is basically var(--{var_name} {, optional fallback}) where if the var_name exists in the variable map that string should be used, otherwise the fallback is used if it was specified. Let me know if this doesn’t work or if you need something in a different form

using System;
using System.Collections.Generic;
using System.Text.RegularExpressions;

namespace ConsoleApp1
  class Program
    static Dictionary<string, string> vars = new Dictionary<string, string>
      { "foo", "orange" },
      { "foo2", "pink" }

    static string GetAttributeValue(string str)
      // valid variables must start with -- and must be a valid css indentifier
      // this regex doesn't deal with escape characters
      Regex regex = new Regex(@"var\(\s*--([_a-zA-Z][_a-zA-Z0-9\-]*)(?:,\s*(.+?)\s*)?\)");

      var match = regex.Match(str);
      if (match.Groups[0].Success)
        var varName = match.Groups.Count > 0 ? match.Groups[1].ToString() : "";
        if (vars.ContainsKey(varName)) return vars[varName];
          // fallback 
          return match.Groups.Count > 1 ? match.Groups[2].ToString() : "";
      return str;

    static void Test(string str)
      Console.WriteLine($"'{str}' --> '{GetAttributeValue(str)}'");
    static void Main(string[] args)
      Test("var( --foo2)"); 
      Test("var( --foo3)"); 
      Test("var(--foo3, red)"); 
      Test("var(--foo3, red, green)"); 
      Test("var(--foo red  green)"); 


'red' --> 'red'
'var(--foo)' --> 'orange'
'var( --foo2)' --> 'pink'
'var( --foo3)' --> ''
'var(--foo' --> 'var(--foo'
'var(--foo,red)' --> 'orange'
'var(--foo3, red)' --> 'red'
'var(--foo3, red, green)' --> 'red, green'
'var(--foo red  green)' --> 'var(--foo red  green)'

updated to fix regex.

paulushubcommented, May 5, 2020

@jhndnnqsc Thanks for the verification. Most do not create SVG files in their projects, those who do might find this useful. I never knew about CSS variables until you mentioned it, for instance. Some projects currently modifying the generated output drawing might also find this useful. Lets keep this thread open for now to see how far we can build on it as others put in their requests.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS Variables (Custom Properties) | Can I use... Support ...
CSS Variables (Custom Properties). - CR. Permits the declaration and usage of cascading variables in stylesheets. Usage % of. all users, all tracked ......
Read more >
Using CSS custom properties (variables) - MDN Web Docs
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific ...
Read more >
A Strategy Guide To CSS Custom Properties
Custom properties have the same rules about where they can be used as normal CSS properties. It's far better to think of them...
Read more >
A Complete Guide to Custom Properties
A custom property is most commonly thought of as a variable in CSS. ... Above, --spacing is the custom property with 1.2rem as...
Read more >
A user's guide to CSS variables – Increment: Frontend
CSS variables are custom properties that cascade normally and even inherit. They start with a reserved -- prefix, and there are no real...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found