This is a migrated thread and some comments may be shown as answers.

How to extract SVG Path for use in RadDiagramShape?

3 Answers 693 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 16 Apr 2020, 10:09 PM

Hello Diagramers,

Can anyone provide advice on how to export the SVG Path from an Illustrator generated SVG file for use in a RadDiagram shape? This works on simple, eg single path shapes using GIMP to export the image path but it does not work for multiple path shapes, eg a rectangle with a domed end. In the latter case the shape displays correctly but mouse clicks are processed over the domed portion and ignored over the rest of the shape. I've attached my Path data and a screen shot of the resulting shape in the hope that someone can shed some light on why I'm getting this behavior.

 

Regards,

Eric Gilbertson

 

<Style TargetType="{x:Type telerik:RadDiagramShape}" x:Key="ClipGraphBranchCell">
        <Setter Property="Background" Value= "Green"/>
        <Setter Property="BorderBrush" Value= "Black"/>
        <Setter Property="Geometry" Value=" M 139.54,3.30 C 137.45,1.11 134.53,0.00 130.72,0.00
             130.72,0.00 8.77,0.00 8.77,0.00
             3.93,0.01 0.01,4.01 -0.00,8.94
             -0.00,8.94 0.00,13.03 0.00,13.03
             0.01,17.97 3.93,21.97 8.77,21.98
             8.77,21.98 130.98,21.98 130.98,21.98
             130.98,21.98 131.60,21.98 131.60,21.98
             134.72,21.97 137.55,20.69 139.62,18.63
             139.62,18.63 146.05,10.97 146.05,10.97
             146.05,10.97 139.54,3.30 139.54,3.30 Z
M 1.50,13.03 C 1.51,17.13 4.76,20.44 8.77,20.45
             8.77,20.45 130.98,20.45 130.98,20.45
             131.15,20.46 131.32,20.46 131.50,20.46
             133.75,20.46 135.83,19.69 137.49,18.40
             137.49,18.40 137.49,3.52 137.49,3.52
             135.72,2.26 133.56,1.52 131.23,1.52
             131.06,1.52 130.89,1.53 130.72,1.53
             130.72,1.53 8.77,1.53 8.77,1.53
             4.76,1.54 1.51,4.85 1.50,8.95
             1.50,8.95 1.50,13.03 1.50,13.03 Z" />
        <Setter Property="IsEditable" Value="False"/>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="Background" Value="Green" />
                <Setter Property="BorderBrush" Value="White"/>
            </Trigger>
        </Style.Triggers>
    </Style>

 

3 Answers, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 21 Apr 2020, 08:41 AM

Hello Eric,

Thank you for the provided resources.

I have double-checked , and you are right that you need to click on the shape to move it. This behavior comes from the conversion of the SVG format to WPF Path, and it is not related to the RadDiagram itself. I would suggest checking this blog post, which describes steps to convert SVG to XAML. 

Regards,
Dinko
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Eric
Top achievements
Rank 1
answered on 21 Apr 2020, 11:36 PM

Hi Dinko,

The link you provided does indeed describe an alternate mechanism for obtaining a Path from a .svg image but the output from it includes a "Fill" attribute (see below) and it does not appear that that this attribute can be used in conjunction with RadDiagramShape since it accepts only a Geometry value. Is there a way to specify a Fill value with a RadDiagramShape?

Regrads,

Eric Gilbertson

Output from Inkspot extraction link:

<FixedPage Width="816" Height="1056" xmlns="http://schemas.microsoft.com/xps/2005/06" xml:lang="und"> <Path Data="F0 M 4.32,528.8 L 528.8,528.8 528.8,4.32 4.32,4.32 4.32,528.8 z" Fill="#ffff7d00" /> ... snip ... </FixedPage>

 

0
Dinko | Tech Support Engineer
Telerik team
answered on 24 Apr 2020, 10:03 AM

Hello Eric,

You are right that the Geometry property does not expose a Fill property to customize the Geometry itself. The color of the Geometry will be taken from the Background property of the shape.

After searching for a possible solution, I think I found one. What I did is to add additional Path element inside the default template of the RadDiagramShape. This Path will be placed under your custom geometry. You can use RectangleGeometry, for example, to fill the whole shape and add some opacity so that it is not visible. This way, when you click in the middle of your custom geometry, you are clicking on the RectangleGeometry, and you will be able to drag the shape. 

I have prepared a sample project to demonstrate this. Keep in mind that the project uses NoXAML binaries with the Office_Black theme applied. I hope this approach will work for you.

Regards,
Dinko
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Diagram
Asked by
Eric
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Eric
Top achievements
Rank 1
Share this question
or