The textPath is damaged when I fill linear gradient.
How to fix it?
Thanks.
[[the broken image]]: https://i.stack.imgur.com/200t3.png
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1000" height="1000">
<g font-size="42.5" font-weight="800">
<path d="M 400, 400
m -100, 0
a 100, 100 0 1,0 200, 0
a 100, 100 0 1,0 -200, 0" fill="transparent" stroke="black" id="SvgjsPath1000"></path>
<circle r="4" cx="400" cy="400" fill="#000000"></circle>
<text stroke-width="10" svgjs:data="{"leading":"1.3"}">
<textPath xlink:href="#SvgjsPath1000" fill="transparent" stroke="#ffffff" svgjs:data="{"leading":"1.3"}">
<tspan alignment-baseline="middle">RRRRRRRRRRRRRRRRRRRRR</tspan>
</textPath>
</text>
<text svgjs:data="{"leading":"1.3"}">
<textPath xlink:href="#SvgjsPath1000" fill="url("#SvgjsLinearGradient1001")" svgjs:data="{"leading":"1.3"}">
<tspan alignment-baseline="middle">RRRRRRRRRRRRRRRRRRRRR</tspan>
</textPath>
</text>
</g>
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="SvgjsLinearGradient1001">
<stop offset="0" style="stop-color:#007cf0"></stop>
<stop offset="1" style="stop-color:#ff0080"></stop>
</linearGradient>
</defs>
</svg>
Apparently, a safari specific rendering bug when applying gradients to <textPath> elements.
I could also reproduce this issue with a simplified example (testing in iOS safari):
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<path
id="MyPath"
fill="none"
stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<text>
<textPath fill="url('#myGradient')" href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
</text>
</svg>
Workaround: create a <mask> containing the text path:
body {
background: #ccc
}
svg {
width: 50%;
border: 1px solid #000
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="250 250 300 300">
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="SvgjsLinearGradient1001">
<stop offset="0" style="stop-color:#007cf0"></stop>
<stop offset="1" style="stop-color:#ff0080"></stop>
</linearGradient>
<mask id="mask" x="0" y="0" width="200%" height="200%">
<rect fill="#000" x="0" y="0" width="200%" height="200%" />
<text>
<textPath class="textPath" font-size="42.5" font-weight="800" href="#SvgjsPath1000" dominant-baseline="middle" fill="#fff">
RRRRRRRRRRRRRRRRRRRRR
</textPath>
</text>
</mask>
</defs>
<g>
<path d="M 300 400 a 100 100 0 1 0 200 0 a 100 100 0 1 0 -200 0 z" fill="transparent" stroke="black" id="SvgjsPath1000" />
<circle r="4" cx="400" cy="400" fill="#000000" />
<text>
<textPath class="textPath" font-size="42.5" font-weight="800" href="#SvgjsPath1000" dominant-baseline="middle" fill="transparent" stroke="#fff" stroke-width="10">
RRRRRRRRRRRRRRRRRRRRR
</textPath>
</text>
<rect mask="url(#mask)" fill="url(#SvgjsLinearGradient1001)" x="0" y="0" width="200%" height="200%" />
</g>
</svg>
I added an SVG chart to a PDF with Itext 7.1.14.
On Windows and Android, it worked normally.
However, on the iPhone or Macbook, the text is upside down and everything is on top, on the left side.
What can I do to resolve this?
Compare:
Image 1 - On Windows and Android
Image 2 - On iPhone
Code to generate the chart with Google Charts:
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(participantesGrafico);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2]);
//let fonte = 'bebas';
let fonte = 'Arial';
var options = {
title: "MÉDIAS",
width: 700,
height: 50 * participantes.length,
bar: { groupWidth: "80%" },
legend: { position: "none" },
chartArea: {
top: 20,
bottom: 20,
left: 100,
right: 20
},
hAxis: { textStyle: { fontName: fonte }, titleTextStyle: { fontName: fonte } },
vAxis: { textStyle: { fontName: fonte }, titleTextStyle: { fontName: fonte } },
titleTextStyle: { fontName: fonte },
tooltip: { textStyle: { fontName: fonte } },
fontName: fonte,
};
var chart = new google.visualization.BarChart(document.getElementById("graficoMedias"));
chart.draw(view, options);
}
Get in SVG. From SVG to String:
var grafico1 = document.getElementById('graficoMedias').getElementsByTagName('svg')[0].outerHTML;
SVG generated by Google Chart:
<svg width="700" height="200" aria-label="A chart." style="overflow: hidden;"><defs id="_ABSTRACT_RENDERER_ID_0"><clipPath id="_ABSTRACT_RENDERER_ID_1"><rect x="100" y="20" width="580" height="160"></rect></clipPath><filter id="_ABSTRACT_RENDERER_ID_2"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="1" dy="1"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.1"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><rect x="0" y="0" width="700" height="200" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><text text-anchor="start" x="100" y="14.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">MÉDIAS</text><rect x="100" y="4" width="580" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><g><rect x="100" y="20" width="580" height="160" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(https://localhost:44322/Evento/Evento/976#_ABSTRACT_RENDERER_ID_1)"><g><rect x="100" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="216" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="332" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="447" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="563" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="679" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="158" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="274" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="390" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="505" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="621" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#ebebeb"></rect></g><g><rect x="101" y="24" width="216" height="32" stroke="#3f51b5" stroke-width="1" fill="#3f51b5"></rect><rect x="101" y="64" width="303" height="32" stroke="#3f51b5" stroke-width="1" fill="#3f51b5"></rect><rect x="101" y="104" width="506" height="32" stroke="#3f51b5" stroke-width="1" fill="#3f51b5"></rect><rect x="101" y="144" width="419" height="32" stroke="#3f51b5" stroke-width="1" fill="#3f51b5"></rect></g><g><rect x="100" y="20" width="1" height="160" stroke="none" stroke-width="0" fill="#333333"></rect></g><g><rect x="317" y="40" width="0" height="1" stroke="none" stroke-width="0" fill="#999999"></rect><rect x="404" y="80" width="0" height="1" stroke="none" stroke-width="0" fill="#999999"></rect><rect x="607" y="120" width="0" height="1" stroke="none" stroke-width="0" fill="#999999"></rect><rect x="520" y="160" width="0" height="1" stroke="none" stroke-width="0" fill="#999999"></rect></g></g><g></g><g><g><text text-anchor="middle" x="100.5" y="194.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">0</text></g><g><text text-anchor="middle" x="216.3" y="194.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">2</text></g><g><text text-anchor="middle" x="332.1" y="194.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">4</text></g><g><text text-anchor="middle" x="447.9" y="194.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">6</text></g><g><text text-anchor="middle" x="563.7" y="194.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">8</text></g><g><text text-anchor="middle" x="679.5" y="194.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">10</text></g><g><text text-anchor="end" x="88" y="44.575" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Chromium</text></g><g><text text-anchor="end" x="88" y="84.325" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Edge</text></g><g><text text-anchor="end" x="88" y="124.075" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Firefox</text></g><g><text text-anchor="end" x="88" y="163.825" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Opera</text></g></g><g><g><g><text text-anchor="end" x="313" y="44.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">3.74</text><rect x="290" y="34" width="23" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g></g><g><g><text text-anchor="end" x="400" y="84.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">5.25</text><rect x="377" y="74" width="23" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g></g><g><g><text text-anchor="end" x="603" y="124.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">8.75</text><rect x="580" y="114" width="23" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g></g><g><g><text text-anchor="end" x="516" y="164.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">7.25</text><rect x="493" y="154" width="23" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g></g></g></g><g></g></svg>
C# code:
byte[] b = Encoding.UTF8.GetBytes(grafico1);
MemoryStream ms2 = new MemoryStream(b);
Image i = SvgConverter.ConvertToImage(ms2, document.GetPdfDocument());
document.Add(i);
here is my svg animation...its working everywhere but ios (safari or chrome)
<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#519ecb">
<g fill="none" fill-rule="evenodd" stroke-width="2">
<circle cx="22" cy="22" r="1">
<animate attributeName="r" begin="0s" dur="2.5s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1"/>
<animate attributeName="stroke-opacity" begin="0s" dur="2.5s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" />
</circle>
<circle cx="22" cy="22" r="1">
<animate attributeName="r" begin="-0.9s" dur="2.5s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" />
<animate attributeName="stroke-opacity" begin="-0.9s" dur="2.5s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" />
</circle>
</g>
</svg>
each animate tag has repeatCount="indefinite" attr but I couldnt write here on code view because of stackoverflow post rules...Its very hard to ask something here...
I have an SVG that doesn't seem to work with iOS devices.
I've tried in both chrome and safari only the SVG appears as a solid blue block colour and doesn't preserve the different layers and their opacity levels...
https://jsfiddle.net/2fLuspdm/
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 3840" style="enable-background:new 0 0 1920 3840;" xml:space="preserve">
<style type="text/css">
.st0{opacity:6.000000e-02;fill:#609FD0;enable-background:new ;}
</style>
<polygon class="st0" points="1920,2614 1920,3641 1470,3005.1 "/>
<polygon class="st0" points="1920,1612.4 1210,780 1920,0.4 "/>
<polyline class="st0" points="0,0 650,0 0,1184.3 1,0 "/>
<polygon class="st0" points="0,898.4 960,1457 0,2778.4 "/>
<polygon class="st0" points="0,3837.4 0,2654 1040,3840 "/>
<polygon class="st0" points="1920,2926 1424,2239 1920,1046 "/>
<polygon class="st0" points="829,3840 1920,2926 1936,3840 "/>
<polygon class="st0" points="0,2530 0,1760 960,2909 "/>
<polygon class="st0" points="1920,0.4 1920,622 40,0.4 "/>
<polygon class="st0" points="1920,1634.5 1920,2404.5 1150,1435.5 "/>
</svg>
Simply compute the exponential (not sure if it's valid SVG syntax, but Safari doesn't like it).
<style type="text/css">
.st0{opacity:.06; fill:#609FD0; enable-background:new ;}
</style>
I would like to create a button control that has a Path element as its content--an IconButton if you will.
This button should fulfill two conditions:
1. The Path element's stroke and fill colors should be available for manipulation by the VisualStateManager.
2. The Path element's data string (which defines it's shape) can be set in code or in XAML, so that I can create several such buttons without creating a new custom control for each.
The only way I can see to do it would involve no XAML whatsoever. That is, setting all the visual states and animations in the code behind, plus generating the Geometry objects point by point (and not being able to use the convenient Data string property on the Path element).
Is there a simpler way to do this?
EDIT
So one of the limitations I'm running into is that Silverlight does not support the mini-language for path expressions in PathGeometry, only in Path. I've got some detailed geometry going on in some of these icons, and I really don't want to take the convenient strings I generated with an Illustrator plug-in (pretty sure it was this one) and make them into separate line segments and curves.
Nice one Chris. If you want to store the paths as resources, you can modify things a bit like so:
First change the dependency property to a Path type:
/// <summary>
/// Button that contains an icon, where the icon is drawn from a path.
/// </summary>
public class IconButton : Button
{
/// <summary>
/// The path data that draws the icon.
/// </summary>
public static readonly DependencyProperty IconPathProperty =
DependencyProperty.Register("IconPath", typeof(Path), typeof(IconButton), new PropertyMetadata(default(Path)));
/// <summary>
/// Depencendy property backer.
/// </summary>
public Path IconPath
{
get { return (Path)GetValue(IconPathProperty); }
set { SetValue(IconPathProperty, value); }
}
}
Next, here's the IconButton control template.
<!-- Icon Button Control Template -->
<ControlTemplate x:Key="IconButtonControlTemplate" TargetType="{x:Type usercontrols:IconButton}">
<Grid x:Name="Grid">
<Border SnapsToDevicePixels="True" x:Name="Border" CornerRadius="1" BorderThickness="1" BorderBrush="{StaticResource ButtonBorderBrush}">
<Path x:Name="Icon" Height="16" Width="16" Stretch="Fill"
Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IconPath.Data}"
UseLayoutRounding="False" Grid.Column="1" VerticalAlignment="Center" Margin="0">
<Path.Fill>
<SolidColorBrush x:Name="IconColor" Color="{Binding Color, Source={StaticResource ButtonIconBrush}}" />
</Path.Fill>
</Path>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource ButtonBackgroundMouseOverBrush}" TargetName="Border"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderMouseOverBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" Value="{StaticResource ButtonBackgroundPressedBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" Value="{StaticResource DisabledIconBrush}" TargetName="Icon"/>
<Setter Property="Background" Value="{StaticResource ButtonBackgroundDisabledBrush}" TargetName="Border"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderDisabledBrush}" TargetName="Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
... and here's the IconButton style that uses this template, and adds a few defaults:
<!-- Icon Button Style -->
<Style TargetType="{x:Type usercontrols:IconButton}">
<Setter Property="FocusVisualStyle" Value="{DynamicResource SimpleButtonFocusVisual}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Height" Value="26"/>
<Setter Property="Width" Value="26"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Content" Value="Button"/>
<Setter Property="Template" Value="{StaticResource IconButtonControlTemplate}"/>
</Style>
Now you can go ahead and create icons and save them in your resource file:
<!-- Undo Icon -->
<Path x:Key="UndoIcon" Stretch="Fill" Data="F1 M 87.7743,80.7396L 87.5215,75.9539L 89.8692,74.2202C 89.9775,75.0329 90.0859,76.586 90.0859,76.5318C 92.9302,73.7417 97.5369,72.9755 100.208,76.2158C 102.019,78.413 102.258,81.2543 99.7657,83.9361C 97.2735,86.6179 92.6142,90.1124 92.6142,90.1124L 90.3748,87.6744L 97.3096,81.769C 97.3096,81.769 99.1516,79.9992 97.8514,78.3558C 96.2374,76.316 94.384,77.2542 92.1447,78.8795C 92.1176,78.9608 93.3998,79.1143 94.3118,79.2768L 92.4336,81.4439L 87.7743,80.7396 Z "/>
<!-- Filter Icon -->
<Path x:Key="FilterIcon" Stretch="Fill" Data="F1 M 6,16L 10,16L 10.0208,10L 16,3L 16,2.86102e-006L 0,9.53674e-007L 0,3L 6,10L 6,16 Z "/>
And finally, create buttons:
<usercontrols:IconButton IconPath="{StaticResource UndoIcon}"></usercontrols:IconButton>
The Path Data property is simply a Geometry. When you say "several such buttons" one assumes that there are a finite number of such buttons which vary with Icon.
Store each "Icon" as a PathGeomerty in a ResourceDictionaryand have that ResourceDictionary referenced as a merged dictionary in the app.xaml.
Now you can simply assign the geomerty into the Path shap Data property.
For the second part of the problem above, here's a kludge which works pretty well for storing string Path data as resources and accessing them from code.
For the first part of the problem, I just created all the animations in code, apply them on mouse events, got rid of the XAML page altogether.
This ship may have long since sailed, but I needed something very similar and was able to roll my own by inheriting from Button:
public class PathButton : Button
{
public static readonly DependencyProperty PathDataProperty =
DependencyProperty.Register("PathData", typeof(Geometry), typeof(PathButton), new PropertyMetadata(default(Geometry)));
public Geometry PathData
{
get { return (Geometry) GetValue(PathDataProperty); }
set { SetValue(PathDataProperty, value); }
}
}
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource BlueColor}" Storyboard.TargetProperty="Color" Storyboard.TargetName="BackgroundRectangleColor" />
<ColorAnimation Duration="0" To="{StaticResource WhiteColor}" Storyboard.TargetProperty="Color" Storyboard.TargetName="IconColor" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Rectangle x:Name="BackgroundRectangle" >
<Rectangle.Fill>
<SolidColorBrush x:Name="BackgroundRectangleColor" Color="{StaticResource GrayColor}" />
</Rectangle.Fill>
</Rectangle>
<Path x:Name="Icon" Stretch="Fill"
Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PathData}"
UseLayoutRounding="False" Grid.Column="1" Width="24" Height="24" VerticalAlignment="Center" Margin="0">
<Path.Fill>
<SolidColorBrush x:Name="IconColor" Color="{StaticResource LightGrayColor}" />
</Path.Fill>
</Path>
<TextBlock x:Name="Text" HorizontalAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Content}" FontSize="9.333" FontFamily="Segoe UI Light" Foreground="{StaticResource LightGray}" Height="11" Margin="0,0,0,3" VerticalAlignment="Bottom"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Example usage:
<Controls:PathButton Content="Options" PathData="F1M50.6954,32.1146C50.7057,31.1041,50.6068,30.1107,50.4583,29.1459L54.5052,25.9193C53.4636,22.0377,51.4583,18.5612,48.7409,15.7604L43.9063,17.5885C42.3776,16.3229,40.6407,15.3099,38.7552,14.5814L37.9857,9.47656C36.1237,8.98181 34.1719,8.68225 32.1511,8.66663 30.1302,8.65625 28.1771,8.92578 26.2995,9.39844L25.4714,14.4948C23.5794,15.2057,21.8229,16.1901,20.2813,17.4401L15.4675,15.5521C12.7201,18.3138,10.6706,21.7631,9.57556,25.6328L13.582,28.9088C13.4193,29.875 13.3164,30.8658 13.3047,31.8776 13.2969,32.8984 13.3945,33.8854 13.5469,34.8588L9.49353,38.0807C10.5417,41.9584,12.5469,45.4401,15.2604,48.2383L20.0938,46.4127C21.6224,47.6744,23.3659,48.6875,25.2513,49.4193L26.0091,54.5234C27.8802,55.0209 29.8333,55.3177 31.8503,55.3334 33.8698,55.3385 35.8243,55.0729 37.6979,54.6041L38.5352,49.5C40.4219,48.7916,42.1784,47.806,43.7253,46.5664L48.53,48.4531C51.2813,45.6836,53.3268,42.233,54.4245,38.3685L50.418,35.0963C50.5833,34.1224,50.6862,33.1354,50.6954,32.1146 M31.9362,41.6615C26.6068,41.6302 22.3073,37.2734 22.3411,31.9375 22.3776,26.6002 26.7266,22.3008 32.0651,22.3359 37.4011,22.3698 41.7005,26.7252 41.6653,32.0625 41.629,37.4023 37.2786,41.6979 31.9362,41.6615"
Style="{StaticResource PathButtonStyle1}" Grid.RowSpan="2" Grid.Column="1" />