Opacity only works for 0 and 1 for Image with SvgImage Source and Svg control

[darinkes]

I noticed you can't fade away an Image with SvgImage Source.

Not sure if this is a limitation of Svg.Skia or Svg itself.

<Style Selector="ContentPresenter">
  <Setter Property="Transitions">
    <Transitions>
      <DoubleTransition Property="Opacity" Duration="0:0:0.5" Easing="LinearEasing"/>
    </Transitions>
  </Setter>
</Style>

ContentPresenter includes a TextBlock and an Image. Only the TextBlock gets slowly invisible.
The Image only disapears as soon as Opacity becomes 0.0

[wieslawsoltes]

@darinkes Could you try with new Svg control:

Svg.Skia/samples/AvaloniaSvgSkiaSample/MainWindow.axaml

Line 22 in 706d968

<Svg Name="svgSvg" Path="/Assets/__tiger.svg"/>

[adossey]

I'm seeing the same behavior as @darinkes using both the Image and Svg controls in Avalonia.Svg.Skia version 0.10.6.1.

[wieslawsoltes]

This is an issue in AvaloniaUI with how opacity is blended when using custom draw operation

[wieslawsoltes]

I have hack fix for that, but not really want it to use #79

[adossey]

Thanks for the quick hack! I tried it out, and it works now when the Opacity is applied directly to the Svg control, but it still doesn't work when the Opacity is inherited from the parent control. I can work around this by just duplicating a little code, but inheriting the Opacity from the parent would certainly be ideal.

[wieslawsoltes]

Thanks for the quick hack! I tried it out, and it works now when the Opacity is applied directly to the Svg control, but it still doesn't work when the Opacity is inherited from the parent control. I can work around this by just duplicating a little code, but inheriting the Opacity from the parent would certainly be ideal.

Without Avalonia fixing this in core library this hack is best I can do.

[darinkes]

@wieslawsoltes thanks for taking a look at it!

Should we open an issue at Avalonia?
May I ask you to do it, since you can be more specific what needs to be done?

[wieslawsoltes]

@darinkes It is known issue, no need to create new one

[mysteryx93]

One year later, Avalonia v0.10.15, Avalonia.Svg.Skia v0.10.14 -- I still have that issue.

Opacity is not respected.

<Svg Path="/Assets/plus.svg" Opacity=".5" />

[ApaulMyLittleAirport]

There is still this problem, can it be solved?

[kevin100702]

There is still this problem
<Button Grid.Column="0" Width="40"> <Image Source="{SvgImage /Assets/Images/monitor.svg}" Opacity="0.6"/> </Button>

[mysteryx93]

Personally I worked around the solution by embedding vector icons into font files. Actually very easy to do, and it works smoothly.

[jamsoft]

I had a very specific use case ... so I just opened the SVG file and set

<svg opacity="0.3">
...
</svg>

[XDgl233]

Another workaround I am using is the DrawingImage method. You can expose the opacity and also the GeometryDrawing brush to let you set the opacity and the fill color for SVG as well. To get the geometry data, you can use the author's tool to help you get them into xaml code.

<Image Opacity="value">
	<DrawingImage>
		<DrawingImage.Drawing>
			<DrawingGroup ClipGeometry="M0,0 V100 H100 V0 H0 Z">
				<GeometryDrawing Brush="#FF000000" Geometry="SVG d" />
				<GeometryDrawing Brush="#FF000000" Geometry="SVG d" />
				...
			</DrawingGroup>
		</DrawingImage.Drawing>
	</DrawingImage>
</Image>

[maxkatz6]

To fix this issue, add .With(new SkiaOptions { UseOpacitySaveLayer = true }); in your AppBuilder configuration.

[leonidcan]

Is it available in 0.10...?