Changing SVG properties from within Juce


Hello Juce Community,

I am new here and I kind of recently started looking at Juce more seriously, so please bear with me.

In the past, I have created an audio effect vst and a synthesizer vsti with juce using introjucer and c++ and I wanted to have a look at UI design. I managed to skin my knobs using custom written code but I found the process kind of tedious and so I wanted to try my luck with svgs.

I have a Drawable and I have loaded the following SVG to it and I paint it on the screen:

Which I made using inkscape and saved as an "optimised" SVG to have everything as a path and kept the layers and groups to a bare minimum.

What I do, is I search for an element with the id value "knobinside", take its matrix transform property, multiply it with a rotate matrix and then redraw the rotated knob head. Problem is, when I call the repaint() method of my Drawable, nothing happens while If I do the whole process to my SVG (XmlElement) before I initially add it and make it visible, it works as intended.

Here is the code [draft code to just check the concept before I implement it as a LookAndFeel subclass]:

   XmlDocument myDocument (File("./Source/knob5.svg"));
   mainElement = myDocument.getDocumentElement();

   if (mainElement == nullptr){
       String error = myDocument.getLastParseError();
       text = error;

   } else {
       addAndMakeVisible(myDrawable = Drawable::createFromSVG(*mainElement));

       String error = String("Everything OK");
       knobElement = findByID(mainElement, "knobinside");

     if (knobElement == nullptr){
         DBG("Knob Not found!");

     } else {

         String transformString = knobElement->getStringAttribute("transform");

         tmatrix M = tmatrixFromString(transformString.toStdString());
         tmatrix R = generateRotateMatrix(30);
         tmatrix T = multiplyTransformationMatrices(M,R);

         String newtransform = stringFromTmatrix(T);

         knobElement->setAttribute("transform", newtransform);



where tmatrixFromString/1, generateRotateMatrix/1 and multiplyTransformationMatrices/2 are functions that pertain to the transformation matrix and findByID/2 does a depth first search for the element with the id "knobinside", which returns the group (tag <g> ) found in the .svg above.

The variables  mainElement, knobElement and myDrawable are declared in the class header as:

    ScopedPointer<XmlElement> mainElement;
    ScopedPointer<XmlElement> knobElement;
    ScopedPointer<Drawable> myDrawable;


I will probably come to the conclusion that the best way to use svg's like that is to treat the background and the handles separately or even use svgs with conjunction to juce's drawing elements, but I want to see if what I am thinking is doable. I am programming with Juce 3.0.8 in Linux. Of course I searched the forum first and I found this:  but I could not access the content provided by the OP (which is also a very old topic).


Thank in advance for your answers.