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.

<html>
  <style>

  :root
  {
    --myfill: orange;
    --othefill: purple;

  }

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

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:
Created 3 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

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];
        else
        {
          // 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("red");  
      Test("var(--foo)"); 
      Test("var( --foo2)"); 
      Test("var( --foo3)"); 
      Test("var(--foo"); 
      Test("var(--foo,red)"); 
      Test("var(--foo3, red)"); 
      Test("var(--foo3, red, green)"); 
      Test("var(--foo red  green)"); 
      Console.ReadKey();
    }
  }
}

outputs

'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.

0reactions

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.

Top 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 ......

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 ...

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...

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...

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...