Okay, so it took me longer than I wanted (my laptop died), but I finally did get around to completing this, and I have to say I'm pretty pleased with the result. This was a fun exercise and I learned something good along the way. I will give you a disclaimer though, other than a rough idea of what an Azimuth Propeller is, I don't know much else. So for instance, I have no idea what the yellow triangle is supposed to indicate and so I didn't add it. I made some assumptions on how I think the rest should work.
I am glad to help you work out any kinks as needed, though my response may be delayed as I am on vacation.
There are bindings so that gauge rotates with the angle, and the blue section will expand with the power.
I added two custom properties to the svg to hold the power and angle. I also provided text labels for these inside of the svg, but that is not really needed, you could easily use labels if you wanted, but this way the text will scale with the gauge.
This was all done inside of Ignition as the shapes are (IMO) simple enough.
Originally when I set out to do this, I had a complex script transform on a path element that calculated the points needed to draw the gauge needle, and that worked well, but depending on one's proficiency with trigonometry could be hard to follow, especially considering the inverted y-axis of the graphic space. Any way I discovered a CSS trick that makes this much, much, simpler.
What is needed is to insure that any elements of the svg that need to be rotated are nested inside of a group, then you can apply a CSS transform to the group and viola all the crazy calculations are done for you! (This must be what @victordcq feels like. 
)
Preformatted Style
transform-box: fill-box
transform-origin: center
transform: rotate(45deg)
I had to provide a different origin due to the center of the group being different than the center I wanted to rotate around.
The binding on the transform is simply a property binding with an expression transform that inserts the angle into the rotate().
Here is the JSON for the view, I did all of this inside of a coordinate container but it will work in any type of container. You may just need to paste this into a test view first and then copy the SVG.
JSON
{
"custom": {},
"params": {},
"props": {},
"root": {
"children": [
{
"custom": {
"angle": 23,
"power": 60
},
"meta": {
"name": "blank"
},
"position": {
"height": 300,
"width": 300,
"x": 62,
"y": 91
},
"propConfig": {
"props.elements[0].elements[2].elements[1].elements[1].d": {
"binding": {
"config": {
"path": "this.custom.power"
},
"transforms": [
{
"code": "\tpower \u003d value/100.0 * 180\n\treturn \"M200,240 l0,-{0:.3f} a180,180 0 0,1 100,0 l0,{0:3f}z\".format(power)",
"type": "script"
}
],
"type": "property"
}
},
"props.elements[0].elements[2].elements[1].elements[1].fill.paint": {
"binding": {
"config": {
"path": "this.props.elements[0].elements[2].elements[1].elements[0].fill.paint"
},
"type": "property"
}
},
"props.elements[0].elements[2].style.transform": {
"binding": {
"config": {
"path": "this.custom.angle"
},
"transforms": [
{
"expression": "\"rotate(\" + toString({value}) + \"deg)\" ",
"type": "expression"
}
],
"type": "property"
}
},
"props.elements[0].elements[3].elements[1].text": {
"binding": {
"config": {
"path": "this.custom.power"
},
"transforms": [
{
"expression": "{value} + \u0027%\u0027",
"type": "expression"
}
],
"type": "property"
}
},
"props.elements[0].elements[3].elements[3].text": {
"binding": {
"config": {
"path": "this.custom.angle"
},
"transforms": [
{
"formatType": "numeric",
"formatValue": "#°",
"type": "format"
}
],
"type": "property"
}
}
},
"props": {
"elements": [
{
"elements": [
{
"cx": 250,
"cy": 250,
"fill": {
"opacity": 0,
"paint": "#000000"
},
"r": 200,
"stroke": {
"paint": "#A1A1A1",
"width": 4
},
"type": "circle"
},
{
"elements": [
{
"stroke": {
"paint": "#a1a1a1"
},
"type": "line",
"x1": 250,
"x2": 250,
"y1": 50,
"y2": 120
},
{
"stroke": {
"paint": "#a1a1a1"
},
"type": "line",
"x1": 450,
"x2": 370,
"y1": 250,
"y2": 250
},
{
"stroke": {
"paint": "#a1a1a1"
},
"type": "line",
"x1": 250,
"x2": 250,
"y1": 450,
"y2": 370
},
{
"stroke": {
"paint": "#a1a1a1"
},
"type": "line",
"x1": 50,
"x2": 120,
"y1": 250,
"y2": 250
},
{
"stroke": {
"paint": "#a1a1a1"
},
"type": "line",
"x1": 391.4213331294189,
"x2": 334.8527998776513,
"y1": 108.57854994415476,
"y2": 165.14717239288217
},
{
"stroke": {
"paint": "#a1a1a1"
},
"type": "line",
"x1": 108.578549944,
"x2": 165.147172393,
"y1": 391.421333129,
"y2": 334.852799878
},
{
"stroke": {
"paint": "#a1a1a1"
},
"type": "line",
"x1": 108.578549944,
"x2": 165.147172393,
"y1": 108.57854994415476,
"y2": 165.147172393
},
{
"stroke": {
"paint": "#a1a1a1"
},
"type": "line",
"x1": 391.4213331294189,
"x2": 334.8527998776513,
"y1": 391.421333129,
"y2": 334.852799878
}
],
"type": "group"
},
{
"elements": [
{
"d": "M250,250 m-50.0,3.06161699787e-15 l0.0,-180.0 a180,180 0 0,1 100.0,6.12323399574e-15 l-0.0,360.0 a180,180 0 0,1 -100.0,6.12323399574e-15z",
"fill": {
"paint": "#868686"
},
"type": "path"
},
{
"elements": [
{
"fill": {
"paint": "#0013FF"
},
"height": 20,
"type": "rect",
"width": 120,
"x": 190,
"y": 240
},
{
"fill": {},
"type": "path"
}
],
"type": "group"
},
{
"fill": {
"paint": "#0013FF"
},
"points": "250,10 265,45 235,45",
"type": "polygon"
}
],
"style": {
"classes": "",
"transform-box": "fill-box",
"transform-origin": "60px 240px"
},
"type": "group"
},
{
"elements": [
{
"fill": {
"paint": "#868686"
},
"style": {
"classes": "",
"fontSize": 35
},
"text": "Power:",
"type": "text",
"x": 15,
"y": 480
},
{
"fill": {
"paint": "#0013FF"
},
"style": {
"classes": "",
"fontSize": 35
},
"type": "text",
"x": 135,
"y": 482
},
{
"fill": {
"paint": "#868686"
},
"style": {
"classes": "",
"fontSize": 35
},
"text": "Angle:",
"type": "text",
"x": 318,
"y": 480
},
{
"fill": {
"paint": "#0013FF"
},
"style": {
"classes": "",
"fontSize": 35
},
"type": "text",
"x": 424,
"y": 482
}
],
"type": "group"
}
],
"type": "group"
}
],
"viewBox": "0 0 500 500"
},
"type": "ia.shapes.svg"
}
],
"meta": {
"name": "root"
},
"type": "ia.container.coord"
}
}
