SVG manipultaion via scene.yaml

[Tonidor]

I'm currently trying to manipulate the color of some POI icons (SVG) and I need them to change whatever is not white. Is it possible to target a specific fill component via the tangrams draw/color property?

This is a part of my scene.yaml of the layer I wish to change:

    layers:
        containers:
            data: {source: containers}
            draw:
                container:
                    order: function() { return feature.sort_rank; }
                    priority: 2
                    size: global.feature_size
                    color: global.get_color
                     interactive: true

This is the funtion getColor that is referenced above:

  get_color: |
    function () {
    var b= {'r':1,'g':0,'b':0}
    var a= {'r':0,'g':1,'b':0}
    var total = 0;
    for(var idx in feature.pins.questions){
                var question = feature.pins.questions[idx]
                if (question.hasOwnProperty("answers"))  {
                    total += question.answers.length;
                    }
        }
    
total = total <= 0? 0 : total >= 100 ? 100 : total;

    var t = total / 100;
    var color= [a.r + (b.r - a.r) * t,
            a.g + (b.g - a.g) * t,
            a.b + (b.b - a.b) * t]
    return color;
    }

Icon style:

<style>
 .cls-1{isolation:isolate;}.cls-2{opacity:0.6;mix-blend-mode:multiply;}.cls-3{fill:#fff;}.cls4{fill:#37474f;}
</style>

This is how it look's so far:

[bcamper]

Unfortunately you cannot access the raw SVG like that, because it's already been rasterized into a WebGL texture by that point. The rasterization is quite low-level in the browser, it's the result of creating an <img>/Image with the SVG as src.

Interesting idea though! :)

[bcamper]

Sorry I actually misinterpreted what you were trying to do.

You can apply color to SVG icons, but by default it's going to just multiply the color you provide the pixel value of the SVG. So white pixels will end up being the color you set (white is all 1 * color). Black pixels would stay black (0 * color). Other colors will multiply component-wise. So you might be able to arrange that to work. Or, you could also write a custom style (under styles) and use a filter shader block to do something more custom: https://tangrams.readthedocs.io/en/latest/Overviews/Shaders-Overview/#filter