Inkscape.org
Beginners' Questions Is CSS var(--variable); supported?
  1. #1
    Deaway Deaway @Deaway

    Hi!

    I am trying to use CSS variables inside my SVG for theming options in Obsidian, but everything is rendered as black in Inkscape. Interestingly (or not), the colors show okay in Obsidian. My understanding is that as of version 1.0.1 Inkscape had CSS capabilities. I my SVG okay or does Inkscape not support variables

     

    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
        <style type="text/css">
            :root {
            --color-red: #fb464c;
            --color-orange: #e9973f;
            --color-yellow: #e0de71;
            --color-cyan: #53dfdd;
            --color-blue: #027aff;
            --color-purple: #a882ff;
            --color-pink: #fa99cd;
            }
        </style>
        <circle
            cx="50"
            cy="50"
            r="30"
            stroke="var(--color-red)"
            fill="var(--color-cyan)" />
        <circle
            cx="150"
            cy="50"
            r="30"
            stroke-width="3"
            stroke="var(--color-purple)" />
        <circle
            cx="50"
            cy="150"
            r="30"
            stroke-width="10"
            fill="var(--color-pink)"
            stroke="var(--color-orange)" />
        <circle
            cx="150"
            cy="150"
            r="30"
            style="stroke-width:4"
            stroke="var(--color-blue)"
            fill="var(--color-orange)" />
    </svg>


     

Inkscape Inkscape.org Inkscape Forum Beginners' Questions Is CSS var(--variable); supported?