Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Problems with svg text attributes (Read 741 times)
Dducky
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 14
Joined: Oct 17th, 2022
Problems with svg text attributes
Apr 17th, 2023 at 11:48am
Print Post  
When we export diagram (by SvgExporter) with items (SvgNode[]) with overriden Draw method which call DrawingContext.DrawText with our custom formatted text - the exporter will create XML with <text> block. The main goal of the issue - main attributes will not be saved (FontSize, FontFamily etc). When we trying to read the SVG by another library - it can't be restored correctly, because the main attributes isn't provided.
Demo is attached, code examples too.
Also we can't draw text as path, because we will face another bug https://mindfusion.eu/Forum/YaBB.pl?num=1665982089. Some letters will be filled.

Code
Select All
/// <summary>
    /// Diagram node that draw the text.
    /// </summary>
    internal class TextDiagramItem : DiagramNode
    {
        private readonly string text;
        private readonly Point textDrawPoint;

        private readonly FlowDirection flowDirection = FlowDirection.LeftToRight;
        private readonly Typeface typeface = new Typeface(new FontFamily("Heebo"), new FontStyle(), new FontWeight(), new FontStretch());
        private readonly double fontSize = 36;
        private readonly Brush foreground = Brushes.Blue;

        /// <summary>
        /// Constructor.
        /// </summary>
        /// <param name="text">Text to draw.</param>
        /// <param name="textDrawPoint">Text draw point.</param>
        public TextDiagramItem(string text, Point textDrawPoint)
        {
            this.text = text;
            this.textDrawPoint = textDrawPoint;

            // See resulting svg <text> and its attributes.
            // Not expected result.
            FontSize = fontSize;
            FontFamily = new FontFamily("Heebo");
        }

        /// <inheritdoc/>
        public override void Draw(DrawingContext graphics, MindFusion.Diagramming.Wpf.RenderOptions options)
        {
            var formattedText = new FormattedText(text, CultureInfo.CurrentCulture, flowDirection, typeface, fontSize, foreground);
            graphics.DrawText(formattedText, textDrawPoint);
        }
    } 



Code
Select All
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            var diagram = new Diagram()
            {
                Bounds = new Rect(0, 0, 1920, 1080),
            };

            var point = new System.Windows.Point(100, 200);
            var text = new TextDiagramItem(text: "Some text", point);

            diagram.Items.Add(text);

            // See output [diagram.svg] file and its <text> attributes.
            // The <text> attribute must contains font-size = 36, font-family=heebo...
            // And other attrs which configured in text diagram item.
            var ms = ExportDiagram(diagram);
            ms.Seek(0, SeekOrigin.Begin);

            var svg = SvgDocument.Open<SvgDocument>(ms);
            // See svg [children] collection and SvgText instance.
            // It parses the svg file and can't parse FontSize, FontFamily etc. correctly.

            var sizedImage = new Bitmap((int)svg.Width.Value, (int)svg.Height.Value);
            svg.Draw(sizedImage);

            sizedImage.Save("test.png", ImageFormat.Png);
        }

        private static Stream ExportDiagram(Diagram diagram)
        {
            var exporter = new SvgExporter()
            {
                SetClipPaths = true,
            };

            var ms = new MemoryStream();
            exporter.Export(diagram, "diagram.svg");
            exporter.Export(diagram, ms);
            return ms;
        } 



See <text> block (and its attributes) in attached diagram.svg file.

MindfusionDemo.zip contains solution which you can debug and review the text nodes which will be parsed by Svg.NET library. The text node doesn't contains a correct font size, font family etc.
  

diagram.svg ( 0 KB | 41 Downloads )
MindfusionDemo_001.zip ( 1727 KB | 97 Downloads )
test_003.png ( 8 KB | 40 Downloads )
test_003.png
Back to top
 
IP Logged
 
Dducky
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 14
Joined: Oct 17th, 2022
Re: Problems with svg text attributes
Reply #1 - Apr 17th, 2023 at 11:53am
Print Post  
Attachments
  

diagram.svg ( 0 KB | 41 Downloads )
test_003.png ( 8 KB | 40 Downloads )
test_003.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: Problems with svg text attributes
Reply #2 - Apr 24th, 2023 at 11:23am
Print Post  
In our test it shows exactly same texts on screen and in SVG drawing:



We do not have the "Heebo" font from your code on the test system though, so WPF might be falling back to the Segoe seen in SVG markup by the time it reaches our visual-tree conversion code. Do you have a Heebo font installed on your side?

The different font size seen in SVG could be due to different DPI in WPF vs SVG. You could try switching diagram's MeasureUnit from WpfPoint to Point to see if it preserves your expected sizes better.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint