Complex Shape Fill

[Mathias]

Hello,

is there a way to have shape fills that are more complex than rgb-values, for example a diagonal hatch fill?

my knowledge on the map control and svgis limited. my current approach is to create a pattern via jquery when the map is created:

        jQuery("map svg defs").html(''
            + '<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">'
            + '  <line x1="0" y1="0" x2="0" y2="10" style="stroke:red; stroke-opacity:0.4; stroke-width:8" />'
            + '</pattern>';

then i use the def as fill for shapes when they are created:

    shape.fill("url(#diagonalHatch)");

this works fine, but i want to have opacity or color depend on other parameters, which would result in many defs.

Do you have any suggestions?

[Tsvetomir]

Hi Mathias,

The shapes of the Kendo UI Map accepts svg elements as fill. Hence, the approach for having complex patterns is to make use of the svg elements. When they are added to the color of the shape, they should be used as-is. The built-in configuration settings provided by the Kendo UI might not be applied properly.

I have noticed that you are dynamically creating the patterns. In order to make them different, use parameters instead of hard-coded values and generate the different patterns dynamically. 

Here is an example of how to make a hatch fill for the shape:

https://dojo.telerik.com/UzOBuHEZ

Let me know in case further assistance is required.


Kind regards,
Tsvetomir
Progress Telerik