MouseOver에서 SVG 채우기 색상을 바꾸는 방법은 무엇입니까?

Question

내 XAML에 svg 파일을 포함 시키려면 SharpVectors을 사용하고 있습니다.

여기 내 ButtonControlTemplate :

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

는 내가 얻는 것은 내 버튼 내부의 텍스트와 SVG 아이콘입니다 :

<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> 

그리고 여기가 버튼을 만드는 예입니다. 이제

내가 MouseOver 내 SVG의 배경 색상을 (정확히 같은 행동이 here 요청 변경하려면, 차이가 나는 내 svgc:SvgViewbox.

에 태그를 "기입"이하지 않는 것이 있나요이다 방법이 내 문제를 해결하기 위해

업데이트 :

<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 파일은 다음과 같은 표준 SVG입니다 R 아래와 같은 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을 검색하고 그 값을 변경하여 다음 MouseOver에 Trigger 스왑이를 사용하여 SVG XAML의 두 복사본을 생성. 당신은 당신의 Path에 대한 MouseEnter 및 MouseLeave 이벤트를 처리하는 AttachedProperty을 사용할 수 있습니다

(OP의 첫번째 코멘트 기준)

편집 # 1. 이 AP를 사용하면 투명도 레벨을 설정할 수 있습니다. 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>