Need Help with SVG - Githubissues

Hi,

First of all, let me thank you for providing an amazing plugin. Since i am no expert in scripting or SVG.js hence would like to seek some help when using this plugin for providing live metrics for the element in the SVG code. This is a part of my SVG code where a pump needs to be changing color based on the value ctrl.series metrics pushed. I did figured that under linearGradient = "red" does changes the color of the SVG however i need this to be based on the conditionals

<g id="zoomG">
<g id="domElemG" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
<g title="Horizontal Pump" parentid="" nativewidth="154" nativeheight="106" myscale="0.35" transform="matrix(0.35 0 0 0.35 852.55 91.55)" id="process1545625699704" class="processElem">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" title="Horizontal Pump" class="Pumps" height="106" width="154" viewBox="0 0 154 105.947" nativewidth="154" nativeheight="106" overflow="visible" myscale="1.0">

    <defs>

        <linearGradient x1="100%" y2="0%" x2="100%" y1="0%" id="lg1_219">

            <stop stop-color="red" offset="0"/>

            <stop stop-color="#aeb5c0" offset="0.22"/>

            <stop stop-color="#dce0e5" offset="0.57"/>

            <stop stop-color="#cacfd7" offset="0.84"/>

            <stop stop-color="#a7afb9" offset="1"/>

        </linearGradient>

        <linearGradient x1="0%" y2="0%" x2="100%" y1="0%" id="lg2_219">

            <stop stop-color="#8f969d" offset="0"/>

            <stop stop-color="#d3d8de" offset="0.64"/>

            <stop stop-color="#9aa0a8" offset="1"/>

        </linearGradient>

        <linearGradient x1="0%" y2="0%" x2="100%" y1="0%" id="lg3_219">

            <stop stop-color="#626974" offset="0"/>

            <stop stop-color="#ccd0d5" offset="0.66"/>

            <stop stop-color="#5e6670" offset="1"/>

        </linearGradient>

        <radialGradient fy="51" r="72.6" id="rg1" cy="51" cx="51" gradientUnits="userSpaceOnUse" fx="51">

            <stop stop-color="#c7cbd1" offset="0"/>

            <stop stop-color="#c4c7cd" offset="0.91"/>

            <stop stop-color="#d4d8dd" offset="0.74"/>

            <stop stop-color="#b6bcc4" offset="0.54"/>

        </radialGradient>

    </defs>

    <g transform="translate(1.01,1)">

        <g transform="matrix(-1,0,0,1,74.4,31.2)">

            <path transform="matrix(0,-1,-1,0,68.3,40.6)" id="shape1" fill="url(#lg1_219)" d="M0,0L39.1,0L39.1,68.3L0,68.3L0,0z"/>

            <path transform="matrix(0,-1,-1,0,74.4,42.9)" id="shape2" fill="url(#lg2_219)" d="M1.4,-0L41.5,-0C42.2,-0,42.9,1.3,42.9,3C42.9,4.7,42.2,6.1,41.5,6.1L1.4,6.1C.6,6.1,0,4.7,0,3C0,1.3,.6,-0,1.4,-0z"/>

            <path transform="matrix(0,-1,-1,0,70.3,42.7)" id="shape3" fill="url(#lg3_219)" d="M42.5,0C42.4,1.1,41.9,1.9,41.1,1.9L1.4,1.9C.6,1.9,.1,1,0,0C0,0,42.5,0,42.5,0z"/>

            <path transform="matrix(0,-1,-1,0,74.1,42.2)" id="shape4" fill="#ffffff" fill-opacity="0.32" d="M.7,0L40.8,0C41.2,0,41.5,.3,41.5,.6C41.5,.9,41.2,1.1,40.8,1.1L.7,1.1C.3,1.1,0,.9,0,.6C0,.3,.3,0,.7,0z"/>

        </g>

        <g transform="translate(77.55,0)">

            <path transform="matrix(0,-1,-1,0,68.3,40.7)" id="shape5" fill="url(#lg1_219)" d="M0,0L39.1,0L39.1,68.3L0,68.3L0,0z"/>

            <path transform="matrix(0,-1,-1,0,74.4,42.9)" id="shape6" fill="url(#lg2_219)" d="M1.4,-0L41.5,-0C42.2,-0,42.9,1.3,42.9,3C42.9,4.7,42.2,6.1,41.5,6.1L1.4,6.1C.6,6.1,0,4.7,0,3C0,1.3,.6,-0,1.4,-0z"/>

            <path transform="matrix(0,-1,-1,0,70.3,42.7)" id="shape7" fill="url(#lg3_219)" d="M42.5,0C42.4,1.1,41.9,1.9,41.1,1.9L1.4,1.9C.6,1.9,.1,1,0,0C0,0,42.5,0,42.5,0z"/>

            <path transform="matrix(0,-1,-1,0,74.1,42.2)" id="shape8" fill="#ffffff" fill-opacity="0.35" d="M.7,0L40.8,0C41.2,0,41.5,.3,41.5,.6C41.5,.9,41.2,1.1,40.8,1.1L.7,1.1C.3,1.1,0,.9,0,.6C0,.3,.3,0,.7,0z"/>

        </g>

        <g transform="translate(26.19,1.31)">

            <path transform="matrix(0,-1,-1,0,102.8,102.6)" id="shape9" fill="url(#rg1)" stroke="#d4d6db" stroke-width="0.25" d="M0,51.4C0,23,23,0,51.3,0C79.7,0,102.6,23,102.6,51.4C102.6,79.8,79.7,102.8,51.3,102.8C23,102.8,0,79.8,0,51.4z"/>

            <path transform="matrix(0,-1,-1,0,94.2,94)" id="shape10" fill="#ffffff" fill-opacity="0.27" d="M0,42.7C0,19.1,19.1,0,42.6,0C66.2,0,85.3,19.1,85.3,42.7C85.3,66.3,66.2,85.5,42.6,85.5C19.1,85.5,0,66.3,0,42.7z"/>

            <path transform="matrix(0,-1,-1,0,85.9,93.9)" id="shape11" fill="#ffffff" fill-opacity="0.13" d="M0,34.5C-0.3,13,17.1,0,17.1,0L73.1,63.9C73.1,63.9,62.3,77.3,42.6,77.3C19.1,77.3,0,58.1,0,34.5z"/>

        </g>

    </g>

</svg>

My Events code

var s = Snap(svgnode);
console.log(ctrl.series[15].stats.current.toFixed(2));
var p1 = s.select("#domElemG");
var colors = ["#008000", "#FF6600", "#FF0000"];
var color = colors[1];
if (ctrl.series[15].stats.current.toFixed(2) > 7) 
{
 p1.attr ({"fill" : color})
}

MarcusCalidus / marcuscalidus-svg-panel

Need Help with SVG #32