Diagram Background Image

2 posts, 0 answers
  1. Chance
    Chance avatar
    4 posts
    Member since:
    Apr 2015

    Posted 28 Apr 2015 Link to this post

    I'm trying to apply a background image to the Diagram Control. 

    I got it to work when viewing on the webpage by adding style="background-image: url('btest.png'); background-repeat: no-repeat; top: 0px;" to the RadDiagram control, but when I export the finished diagram to PDF or SVG the background image doesn't show.   Is there a different way I could add the background image to the diagram where it would work with the exporting tools?






  2. Ianko
    Ianko avatar
    1507 posts

    Posted 01 May 2015 Link to this post

    Hi Chance,

    Using the markup element to add CSS would affect only the wrapper element in the DOM. Exporting the diagram includes only the SVG elements that are rendered, and this is the expected behavior.

    Due to that, to actually export an image background to svg, you would need such an svg element in the main SVG layer. Adding such, is a custom solution and you should directly manipulate the DOM SVG elements. RadDiagram markup, or Kendo Diagram API does not expose options to easily do that. Therefore, it is up to plain JavaScript SVG manipulation to interact with the elements inside and add an SVG Image.

    As this solution is a general knowledge matter, I suggest looking for help in public materials related to SVG, e.g., http://stackoverflow.com/questions/6701705/programmatically-creating-an-svg-image-element-with-javascript.

  3. DevCraft R3 2016 release webinar banner
Back to Top