This is a migrated thread and some comments may be shown as answers.
Complex Shape Fill
1 Answer 3 Views
Map
This is a migrated thread and some comments may be shown as answers.
Mathias
Top achievements
Rank 1
Mathias asked on 05 Jul 2019, 08:01 AM

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?

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 09 Jul 2019, 06:57 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Map
Asked by
Mathias
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or