Как поменять цвет заливки SVG на MouseOver?

Question

Я использую SharpVectors для вставки svg-файла в свой XAML.

Вот мой ButtonControlTemplate:

<ControlTemplate x:Key="ButtonTemplate" TargetType="Button"> 
<Border BorderThickness="{TemplateBinding BorderThickness}" 
     BorderBrush="{TemplateBinding BorderBrush}" 
     Padding="{TemplateBinding Padding}" 
     Background="{TemplateBinding Background}" 
     SnapsToDevicePixels="True"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
     </Grid.ColumnDefinitions> 
     <svgc:SvgViewbox x:Name="svgIcon" Grid.Column="0" Margin="{TemplateBinding Padding}" Height="20" Width="20" Stretch="Uniform" /> 
     <customUserControl:ExtendedBinding Grid.Column="0" 
              Source="{Binding ElementName=svgIcon,Path=Source,Mode=TwoWay}" 
              Target="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" /> 
     <ContentPresenter x:Name="contentPresenter" 
          Grid.Column="1" 
          Focusable="False" 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          Margin="{TemplateBinding Padding}" 
          RecognizesAccessKey="True" 
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
    </Grid> 
</Border> 
</ControlTemplate> 

А вот пример создания кнопки:

<Button Content="Text" Tag="../../../../Assets/Icons/cross.svg" Click="OnClick"/> 

Что я получаю это значок SVG с текстом внутри моей кнопки.

Теперь я хотел бы изменить цвет фона моего SVG на MouseOver (точно такое же поведение спросил here, разница в том, что я не есть «Fill» тег в моем svgc:SvgViewbox.

Есть ли способ решить мою проблему

Update: Мой файл SVG является стандартом SVG, как это:

<g> 
    <g> 
     <path d="M311.517,14.053c-99.265,0-180.024,80.66-180.024,179.805c0,41.538,14.182,79.827,37.955,110.303L0,451.176l22.889,26.313 l170.577-147.994c31.628,27.496,72.926,44.168,118.051,44.168c99.266,0,180.025-80.661,180.025-179.805 C491.542,94.713,410.784,14.053,311.517,14.053z M311.517,353.663c-88.237,0-160.024-71.688-160.024-159.805 S223.279,34.053,311.517,34.053s160.025,71.688,160.025,159.805S399.755,353.663,311.517,353.663z" fill="#FFFFFF"/> 
     <polygon points="322.447,122.812 300.587,122.812 300.587,182.928 240.471,182.928 240.471,204.788 300.587,204.788  300.587,264.904 322.447,264.904 322.447,204.788 382.563,204.788 382.563,182.928 322.447,182.928 " fill="#000000"/> 
    </g> 
</g> 

Answer 1

Там должно быть несколько GeomtryDrawing «ы в вас г svg XAML, как показано ниже:

<DrawingGroup> 
    <GeometryDrawing Brush="#FF71BF22"> 
     <GeometryDrawing.Geometry> 
      <PathGeometry FillRule="Nonzero" Figures="M546.394,327.725L536.856,272.111 507.584,214.272C507.584,214.272,493.855,193.075,471.075,197.47L498.963,334.022 546.394,327.725z" /> 
     </GeometryDrawing.Geometry> 
    </GeometryDrawing> 

Поиск в коде всех таких Brush и изменить их, создавая тем самым две копии SVG XAML, а затем с помощью Trigger своп эти на MouseOver.

EDIT # 1 (на основе 1 комментарий ФП в)

Вы можете использовать AttachedProperty для обработки MouseEnter и MouseLeave события для Path. Эта точка доступа позволяет установить уровень прозрачности. Ваш Path должен быть под Grid.

public static byte GetSvgProp(DependencyObject obj) 
{ 
    return (byte)obj.GetValue(SvgPropProperty); 
} 

public static void SetSvgProp(DependencyObject obj, byte value) 
{ 
    obj.SetValue(SvgPropProperty, value); 
} 

// Using a DependencyProperty as the backing store for SvgProp. This enables animation, styling, binding, etc... 
public static readonly DependencyProperty SvgPropProperty = 
    DependencyProperty.RegisterAttached("SvgProp", typeof(byte), typeof(Window2), new PropertyMetadata((byte)0xFF, new PropertyChangedCallback(SvgPropChanged))); 

private static void SvgPropChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
{  
    ((Grid)d).Loaded += (s, args) => { 

     var paths = ((Grid)s).Children.OfType<Path>(); 
     foreach (Path p in paths) 
     { 
      p.MouseEnter += (s1, args1) => { 
       Path p1 = (Path)s1; 
       p1.Tag = p1.Fill; // save old value 
       var c = ((SolidColorBrush)p1.Fill).Color; 
       Color newColor = new Color() { A=(byte)e.NewValue, R = c.R, G = c.G, B = c.B }; 
       p1.Fill = new SolidColorBrush() { Color = newColor }; 
      }; 
      p.MouseLeave += (s2, args2) => { 
       Path p2 = (Path)s2; 
       //p2.Fill.Opacity = 1.0; 
       p2.Fill = (Brush)p2.Tag; // revert back to old value 
      }; 
     } 

    }; 
} 

Предполагая, что ваш код SVG находится в Grid:

<Grid local:Window2.SvgProp="0x23"> 
      <Path Fill="Red" Data="M311.517,14.053c-99.265,0-180.024,80.66-180.024,179.805c0,41.538,14.182,79.827,37.955,110.303L0,451.176l22.889,26.313 l170.577-147.994c31.628,27.496,72.926,44.168,118.051,44.168c99.266,0,180.025-80.661,180.025-179.805 C491.542,94.713,410.784,14.053,311.517,14.053z M311.517,353.663c-88.237,0-160.024-71.688-160.024-159.805 S223.279,34.053,311.517,34.053s160.025,71.688,160.025,159.805S399.755,353.663,311.517,353.663z"/>      
      <Polygon Points="322.447,122.812 300.587,122.812 300.587,182.928 240.471,182.928 240.471,204.788 300.587,204.788  300.587,264.904 322.447,264.904 322.447,204.788 382.563,204.788 382.563,182.928 322.447,182.928 " Fill="#000000"/> 
</Grid>