Issue
I am using nuget packages
- SkiaSharp.Svg
- SkiaSharp.Views.Forms
- SkiaSharp.Extended
The problem is some SVG files display fine, but others show me all black and I have no idea why that is, If you could help me please I would be very grateful
This is a helper class to render the SVG files:
public class SVGImage : ContentView
{
// Bindable property to set the SVG image path
public static readonly BindableProperty SourceProperty = BindableProperty.Create(
nameof(Source), typeof(string), typeof(SVGImage), default(string), propertyChanged: RedrawCanvas);
private readonly SKCanvasView canvasView = new SKCanvasView();
public SVGImage()
{
this.Padding = new Thickness(0);
this.BackgroundColor = Color.Transparent;
this.Content = this.canvasView;
this.canvasView.PaintSurface += this.CanvasView_PaintSurface;
}
// Property to set the SVG image path
public string Source
{
get => (string)this.GetValue(SourceProperty);
set => this.SetValue(SourceProperty, value);
}
/// <summary>
/// Method to invaldate the canvas to update the image
/// </summary>
/// <param name="bindable">The target canvas</param>
/// <param name="oldValue">Previous state</param>
/// <param name="newValue">Updated state</param>
public static void RedrawCanvas(BindableObject bindable, object oldValue, object newValue)
{
SVGImage image = bindable as SVGImage;
image?.canvasView.InvalidateSurface();
}
/// <summary>
/// This method update the canvas area with teh image
/// </summary>
/// <param name="sender">The sender</param>
/// <param name="args">The arguments</param>
private void CanvasView_PaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKCanvas canvas = args.Surface.Canvas;
canvas.Clear();
if (string.IsNullOrEmpty(this.Source))
{
return;
}
// Get the assembly information to access the local image
Assembly assembly = typeof(SVGImage).Assembly;
// Update the canvas with the SVG image
using (Stream stream = assembly.GetManifestResourceStream(assembly.GetName().Name + ".Images." + this.Source))
{
SkiaSharp.Extended.Svg.SKSvg svg = new SkiaSharp.Extended.Svg.SKSvg();
svg.Load(stream);
SKImageInfo imageInfo = args.Info;
canvas.Translate(imageInfo.Width / 2f, imageInfo.Height / 2f);
SKRect rectBounds = svg.ViewBox;
float xRatio = imageInfo.Width / rectBounds.Width;
float yRatio = imageInfo.Height / rectBounds.Height;
float minRatio = Math.Min(xRatio, yRatio);
canvas.Scale(minRatio);
canvas.Translate(-rectBounds.MidX, -rectBounds.MidY);
canvas.DrawPicture(svg.Picture);
}
}
}
showing the svg image in the xaml
<StackLayout>
<local:SVGImage
HeightRequest="100"
HorizontalOptions="CenterAndExpand"
Source="Placa.svg"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
</StackLayout>
as seen in the image the svg file is shown in black without the colors
When should i show this way
Placa.svg:
UPDATE
The Svg file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 70.15">
<defs>
<style>.d{fill:#fff;}.e{fill:#c1c3c8;}.f{fill:#464655;}.g{fill:#ff6e40;}.h{isolation:isolate;opacity:.1;}</style>
</defs>
<g id="a"/>
<g id="b">
<g id="c">
<g>
<path class="e" d="M107.62,0H12.38C5.54,0,0,5.54,0,12.38V57.77c0,6.83,5.54,12.38,12.38,12.38H107.62c6.84,0,12.38-5.54,12.38-12.38V12.38c0-6.84-5.54-12.38-12.38-12.38Z"/>
<path class="d" d="M12.38,61.29c-1.94,0-3.52-1.58-3.52-3.52V12.38c0-1.94,1.58-3.52,3.52-3.52H107.62c1.94,0,3.52,1.58,3.52,3.52V57.77c0,1.94-1.58,3.52-3.52,3.52H12.38Z"/>
<g>
<path class="g" d="M107.62,8.86H12.38c-1.94,0-3.52,1.58-3.52,3.52v9.13H111.14V12.38c0-1.94-1.58-3.52-3.52-3.52Z"/>
<path class="g" d="M8.86,48.64v9.13c0,1.94,1.58,3.52,3.52,3.52H107.62c1.94,0,3.52-1.58,3.52-3.52v-9.13H8.86Z"/>
</g>
<g>
<path class="f" d="M29.28,13.13c1.15,0,2.08,.93,2.08,2.08s-.93,2.08-2.08,2.08-2.08-.93-2.08-2.08,.93-2.08,2.08-2.08Z"/>
<path class="f" d="M29.28,52.9c1.15,0,2.08,.93,2.08,2.08s-.93,2.08-2.08,2.08-2.08-.93-2.08-2.08,.93-2.08,2.08-2.08Z"/>
<path class="f" d="M90.72,13.13c1.15,0,2.08,.93,2.08,2.08s-.93,2.08-2.08,2.08-2.08-.93-2.08-2.08,.93-2.08,2.08-2.08Z"/>
<path class="f" d="M90.72,52.9c1.15,0,2.08,.93,2.08,2.08s-.93,2.08-2.08,2.08-2.08-.93-2.08-2.08,.93-2.08,2.08-2.08Z"/>
</g>
<path class="h" d="M19.99,57.77V12.38c0-6.84,5.54-12.38,12.38-12.38H12.38C5.54,0,0,5.54,0,12.38V57.77c0,6.83,5.54,12.38,12.38,12.38h19.99c-6.84,0-12.38-5.54-12.38-12.38Z"/>
</g>
</g>
</g>
</svg>
Solution
I believe this is a known issue and is discussed here:
https://github.com/mono/SkiaSharp.Extended/issues/48
Answered By - Victor Chelaru
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.