Inkscape.org
Beyond the Basics CSS Varibles in Inkskap
  1. #1
    TCI TCI @TCI

    I have created a SVG file that defines an object with symbol and the colors are changed with CSS variables in the use section. When I view the drawing with Firefox, it is displayed correctly. When I open it with Inkscape the colors are not displayed.

    Is it even possible to use CSS variables with Inkscape?

    Here is my example:

    <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 330 330"
    >
     
    <symbol id="shape_01">
    <rect style="fill: var(--bodycolor);" stroke-width="0" id="rect1" width="50" height="50" x="0" y="0" />
    <circle style="fill: var(--secondcolor);" stroke-width="0" id="path1" cx="25" cy="25" r="20" />
    </symbol>
     
    <use href="#shape_01" x="0" y="0" width="50" height="50" style="--bodycolor: #e14e4e; --secondcolor: #51a7fe;" />
    <use href="#shape_01" x="55" y="0" width="50" height="50" style="--bodycolor: #e45f4d; --secondcolor: #5394fe;" />
     
    </svg>
Prijavi se sada
Inkscape Inkscape.org Inkscape Forum Beyond the Basics CSS Varibles in Inkskap

Forums developed by Martin, Jabier, Mihaela. Contact Us if you have a problem using the forum.