KnobConfigVertical

The path of the image file and the display size of the image must be specified. Furthermore, the offset of the "anchor point" can be defined. This allows the image to be positioned correctly with respect to the value bar.

Note that an SVG file opens its own viewport and therefore the aspect ratio cannot normally be changed.

Partially transparent images in PNG and SVG format are also supported. For pixel graphics (PNG, JPG) please note that the attributes KnobColor and KnobArrowsColor have no effect. If an SVG is used, the color definition can take effect if the SVG is prepared accordingly.

When loading, the following character substitution is performed in the SVG:

• {KnobColorStroke} is replaced by "stroke:" followed by KnobColor as CSS color if KnobColor is set, otherwise removed
• {KnobColorFill} is replaced by "fill:" followed by KnobColor as CSS color if KnobColor is set, otherwise removed
• {KnobColorGradientDefinition} is replaced by a matching SVG <linearGradient> element as string if KnobColor is a LinearGradientColor, otherwise removed
• {KnobArrowsColorStroke} is replaced by "stroke:" followed by KnobArrowsColor as CSS color if KnobArrowsColor is set, otherwise removed
• {KnobArrowsColorFill} is replaced by "fill:" followed by KnobArrowsColor as CSS color if KnobArrowsColor is set, otherwise removed
• {KnobArrowsColorGradientDefinition} is replaced by a matching SVG <linearGradient> element as string if KnobArrowsColor is a LinearGradientColor, otherwise removed

Example SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40">
    <defs>{KnobColorGradientDefinition}</defs>
    <circle r="18px" cx="20px" cy="20px"
        style="stroke-width:3px;{KnobColorFill}{KnobArrowsColorStroke}"></circle>
    <path d="M 18 11 L 16 11 L 7 20 L 16 29 L 18 29 L 18 27 L 11 20 L 18 13 Z"
        style="stroke:none;{KnobArrowsColorFill}"></path>
    <path d="M 22 13 L 24 11 L 33 20 L 24 29 L 22 29 L 22 27 L 29 20 L 22 13 Z"
    style="stroke:none;{KnobArrowsColorFill}"></path>
</svg>