Can not drag AxismarkerAnnotation in VerticallyStackedAxes correctly - scichart

I use VerticallStackedAxes of SciChart component and add 7 AxisMarkerAnnotation to each NumericAxis but AxisMarkerAnnotations not draggable except first of them.
this is the part of my UserControl code:
<s:SciChartSurface.YAxes>
<s:NumericAxis x:Name="Ch0" Style="{StaticResource YAxisStyle}" Id="Ch0" AxisTitle="Ch0" Grid.Row="0"/>
<s:NumericAxis x:Name="Ch1" Style="{StaticResource YAxisStyle}" Id="Ch1" AxisTitle="Ch1" Grid.Row="2" />
<s:NumericAxis x:Name="Ch2" Style="{StaticResource YAxisStyle}" Id="Ch2" AxisTitle="Ch2" Grid.Row="4" />
<s:NumericAxis x:Name="Ch3" Style="{StaticResource YAxisStyle}" Id="Ch3" AxisTitle="Ch3" Grid.Row="6" />
<s:NumericAxis x:Name="Ch4" Style="{StaticResource YAxisStyle}" Id="Ch4" AxisTitle="Ch4" Grid.Row="8" />
<s:NumericAxis x:Name="Ch5" Style="{StaticResource YAxisStyle}" Id="Ch5" AxisTitle="Ch5" Grid.Row="10" />
<s:NumericAxis x:Name="Ch6" Style="{StaticResource YAxisStyle}" Id="Ch6" AxisTitle="Ch6" Grid.Row="12" />
<s:NumericAxis x:Name="Ch7" Style="{StaticResource YAxisStyle}" Id="Ch7" AxisTitle="Ch7" Grid.Row="14" />
</s:SciChartSurface.YAxes>
<s:SciChartSurface.ChartModifier>
<s:ModifierGroup>
<s:RubberBandXyZoomModifier IsXAxisOnly="True"/>
<s:ZoomExtentsModifier/>
<s:CursorModifier ShowAxisLabels="False" ShowTooltip="False"/>
</s:ModifierGroup>
</s:SciChartSurface.ChartModifier>
<s:SciChartSurface.Annotations>
<!-- Draws Bands behind each axis -->
<s:BoxAnnotation YAxisId="Ch0" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch0}" Y2="{Binding VisibleRange.Max, ElementName=Ch0}" Background="#11000000" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch1" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch1}" Y2="{Binding VisibleRange.Max, ElementName=Ch1}" Background="#44B0C4DE" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch2" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch2}" Y2="{Binding VisibleRange.Max, ElementName=Ch2}" Background="#11000000" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch3" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch3}" Y2="{Binding VisibleRange.Max, ElementName=Ch3}" Background="#44B0C4DE" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch4" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch4}" Y2="{Binding VisibleRange.Max, ElementName=Ch4}" Background="#11000000" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch5" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch5}" Y2="{Binding VisibleRange.Max, ElementName=Ch5}" Background="#44B0C4DE" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch6" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch6}" Y2="{Binding VisibleRange.Max, ElementName=Ch6}" Background="#11000000" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch7" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch7}" Y2="{Binding VisibleRange.Max, ElementName=Ch7}" Background="#44B0C4DE" AnnotationCanvas="BelowChart"/>
<s:AxisMarkerAnnotation X1="0.0"
Y1="0.0"
YAxisId="Ch0"
IsEditable="True"
LabelTemplate="{StaticResource AxisMarkerTemplate}"
PointerTemplate="{StaticResource DefaultAxisPointerTemplate}"/>
<s:AxisMarkerAnnotation X1="0.0"
Y1="0.0"
YAxisId="Ch1"
IsEditable="True"
LabelTemplate="{StaticResource AxisMarkerTemplate}"
PointerTemplate="{StaticResource DefaultAxisPointerTemplate}"/>
</s:SciChartSurface.Annotations>
You can find source code in this url:
https://github.com/ABTSoftware/SciChart.WPF.Examples/tree/master/v4.x/Examples/SciChart.Examples/Examples/ModifyAxisBehaviour
thanks

there is a bug in GetDataValue from axis class, that doesn't calculate yaxis offset.
In one of my projects, I fixed the problem with this class:
class FixedAxisMarkerAnnotation : AxisMarkerAnnotation
{
protected override IComparable FromCoordinate(double coord, IAxis axis)
{
var coordinateCalculator = this.YAxis.GetCurrentCoordinateCalculator();
if (!axis.IsXAxis)
coord += coordinateCalculator.CoordinatesOffset;
//
return base.FromCoordinate(coord, axis);
}
}

I was able to reproduce this problem, and currently investigating it.
Also you can track the progress on the issue here ===>>> https://abtsoftware.myjetbrains.com/youtrack/issue/SC-4202
Nazar Pelyushkevych,
SciChart WPF team

Related

How to put an svg path with a viewbox inside another svg data with another viewbox

I have this svg element image of a bass cleff:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="36.16 204.35 284.921 811.583" width="284.921" height="811.583">
<path d="m200.680145,652.121826c-12.46701,2.556702 -24.020721,9.3974 -35.04837,20.294373c-11.041428,11.096924 -16.951889,23.753906 -17.918106,37.757019c-0.607315,8.802002 1.710495,19.011719 6.794357,30.015381c5.070023,11.203613 13.355072,19.614136 24.440247,25.403992c3.754883,1.063049 5.421631,3.187988 5.228394,5.988647c-0.069,1.000244 -1.541763,1.903564 -5.005981,2.468567c-17.930832,-5.860168 -32.294312,-16.700073 -42.91748,-32.105835c-10.609375,-15.605835 -15.465866,-32.824646 -14.541847,-52.05658c2.023293,-20.563049 9.564827,-39.33844 22.610786,-56.125977c13.2603,-16.973816 29.57074,-28.511169 48.931351,-34.612183l-8.9366,-71.97052c-32.648514,23.474854 -59.550636,48.351257 -80.934525,75.01532c-21.370087,26.46405 -33.480858,55.978943 -36.532852,88.530884c-0.606544,14.63092 1.42141,29.041626 6.097679,43.032043c4.66246,14.190491 12.228981,27.174377 22.671944,39.351807c21.10025,24.168518 49.763901,38.005066 85.576111,41.682068c12.287582,0.043823 25.473907,-1.257263 39.759521,-3.889526l-20.274628,-158.77948zm14.576233,-1.004211l20.668411,155.992676c31.737534,-10.271912 49.041763,-36.212524 51.885178,-77.421692c-0.852386,-13.927612 -4.007233,-26.607117 -10.066132,-38.080017c-5.844543,-11.659058 -14.060577,-21.069824 -24.848618,-28.246094c-10.788025,-7.17627 -23.200623,-11.248657 -37.63884,-12.244873zm-26.75383,-210.882782c6.89357,-3.544281 14.996841,-10.02005 23.894958,-19.254913c8.884293,-9.034882 17.692276,-19.883942 26.195831,-32.161011c8.717896,-12.463287 15.845337,-25.237274 21.382339,-38.322021c5.523193,-12.884705 8.598633,-25.335297 9.39917,-36.937866c0.345093,-5.001129 0.289093,-10.029907 -0.409882,-14.500061c-0.305237,-7.256958 -2.124603,-13.010376 -5.672424,-17.074127c-3.561646,-3.863708 -8.236328,-6.196228 -14.252258,-6.611328c-12.03186,-0.83017 -23.371216,5.82431 -34.018097,19.96344c-8.30304,12.290924 -15.568512,27.065369 -21.167236,43.964783c-5.813049,17.085632 -9.606995,34.109589 -11.208908,51.485779c-0.363815,19.873596 1.726639,36.298584 5.856506,49.447327zm-13.434006,10.730896c-6.787811,-33.029846 -9.523605,-66.383118 -8.207397,-100.059753c1.691254,-21.590942 5.291183,-41.64325 10.799805,-60.156891c5.308075,-18.527435 12.241516,-34.329803 20.827866,-47.807098c8.385849,-13.49118 17.740219,-23.498566 27.86261,-30.036041c9.064499,-5.806458 15.51561,-8.77829 18.924652,-8.54306c2.606888,0.179871 4.743713,1.332306 6.624786,3.271057c1.881088,1.938782 4.28096,5.119324 7.213394,9.341583c21.530457,35.454071 30.746521,77.093323 27.461456,124.703888c-1.559723,22.605042 -6.085999,44.402405 -13.620239,65.992188c-7.319916,21.403595 -17.378235,41.613251 -30.147369,60.228882c-12.983459,18.80188 -27.792801,34.864777 -44.642349,48.374969l10.804672,79.938293c8.892365,-0.391479 14.963501,-0.77655 18.372528,-0.541321c15.240341,1.051575 28.655579,5.193176 40.847321,12.466309c12.191742,7.273132 22.42691,16.622192 30.491089,28.233398c8.078003,11.411255 14.040283,24.284424 17.88681,38.619629c3.646027,14.32135 5.2453,29.104492 4.196289,44.307861c-1.628723,23.605225 -9.335907,44.781128 -23.107697,63.327576c-13.77179,18.546448 -33.401154,31.46283 -59.102432,38.935303c0.927917,9.912903 2.755341,24.309753 5.710419,42.804382c2.740738,18.680847 4.741104,33.491638 6.001068,44.432373c1.259949,10.940735 1.344315,21.398438 0.640366,31.600708c-1.090424,15.803589 -5.866699,29.543701 -14.342651,41.420654c-8.676483,11.863159 -19.766617,20.745789 -33.470932,26.634094c-13.503815,5.902161 -28.176682,8.306641 -43.818085,7.227417c-22.05838,-1.521973 -40.881439,-9.051636 -56.483002,-22.388916c-15.587738,-13.537292 -23.265457,-30.749817 -22.604477,-52.01001c1.25032,-9.360474 4.063484,-18.010254 8.653831,-26.135376c4.59034,-8.125122 10.473953,-14.553101 17.851418,-19.269958c7.19072,-4.930786 15.605728,-7.164124 25.072083,-7.113892c7.820694,0.539612 15.088501,3.252014 21.817215,7.937317c6.514374,4.871399 11.728973,11.060059 15.429413,18.752258c3.499893,7.678406 5.139816,16.03241 4.532501,24.834351c-0.814377,11.802673 -5.515121,21.528076 -14.10228,29.176453c-8.587143,7.648376 -19.10408,11.143738 -31.336456,10.299622l-4.612206,-0.318176c6.992531,12.542297 19.398598,19.629211 37.245842,20.860657c9.02388,0.622559 18.386337,-0.741333 27.859207,-3.705688c9.687195,-3.150513 17.852966,-7.612061 24.91217,-13.556885c7.059219,-5.944885 11.940186,-12.441956 14.241852,-19.518982c3.97496,-7.966553 6.365967,-19.258423 7.345963,-33.461609c0.662552,-9.602112 0.322418,-19.273376 -0.819809,-29.000061c-1.156052,-9.526611 -3.093903,-22.32312 -5.827362,-38.189514c-2.747253,-15.666321 -4.726517,-27.862732 -5.764832,-36.175232c-12.238907,2.170471 -24.782227,2.913025 -37.816742,2.013611c-21.857834,-1.508118 -42.208862,-7.33429 -61.039207,-17.678406c-18.83036,-10.344116 -35.019707,-23.923035 -48.754761,-40.950439c-13.534512,-17.013611 -23.722504,-35.806335 -30.536373,-56.778137c-6.62714,-20.757996 -9.375191,-42.253235 -8.057411,-64.271973c2.210022,-20.349182 7.372784,-39.690674 15.861763,-57.59668c8.502769,-18.106018 18.941837,-35.073425 31.503925,-50.688416c12.562096,-15.61499 25.428627,-29.801971 38.585793,-42.360931c13.343895,-12.345093 30.760139,-28.228119 52.635963,-47.421387z" id="path9" stroke-width="0.602291" stroke="#131516" fill-rule="evenodd" style=""/>
</svg>
I want to put this data inside musical notation, which is another svg element built from midi data, that contains other notes lines etc, which has it's own viewBox.
<svg viewBox="0 0 320 3200">
</svg>
How to I adjust the bass cleff size to fit into this new svg? I thought about dividing the numbers inside path data to adjust for the new svg viewBox, is there a better way?
I tried to use a symbol as described here: https://css-tricks.com/svg-symbol-good-choice-icons/,
Here's my product:
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin" viewBox="0 0 5760 320">
<symbol viewBox="36.16 204.35 284.921 811.583">
<rect x="0" y="0" width="811" height="284" stroke="black" stroke-width="6" fill-rule="evenodd" fill="red"></rect>
</symbol>
<rect width="100%" height="100%" fill="white"></rect>
<line x1="0" y1="80" x2="5760" y2="80" stroke="black" stroke-width="4"></line>
<line x1="0" y1="120" x2="5760" y2="120" stroke="black" stroke-width="4"></line>
<line x1="0" y1="160" x2="5760" y2="160" stroke="black" stroke-width="4"></line>
<line x1="0" y1="200" x2="5760" y2="200" stroke="black" stroke-width="4"></line>
<line x1="0" y1="240" x2="5760" y2="240" stroke="black" stroke-width="4"></line>
<use href="#gclef" fill="red"></use>
</svg>
I've replaced contents of the symbol #gclef with a red rectangle for debugging,
But the use doesn't render the rectangle.
If I put in path data and render a g clef, it renders, but I can't position it properly.
You can embed one <svg> element as a child of another <svg>. The viewBox will work. You can use the x, y, width and height attributes to size and position it.
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin" viewBox="0 0 5760 320">
<rect width="100%" height="100%" fill="white"></rect>
<line x1="0" y1="80" x2="5760" y2="80" stroke="black" stroke-width="4"></line>
<line x1="0" y1="120" x2="5760" y2="120" stroke="black" stroke-width="4"></line>
<line x1="0" y1="160" x2="5760" y2="160" stroke="black" stroke-width="4"></line>
<line x1="0" y1="200" x2="5760" y2="200" stroke="black" stroke-width="4"></line>
<line x1="0" y1="240" x2="5760" y2="240" stroke="black" stroke-width="4"></line>
<svg viewBox="36.16 204.35 284.921 811.583" width="100" x="20">
<path d="m200.680145,652.121826c-12.46701,2.556702 -24.020721,9.3974 -35.04837,20.294373c-11.041428,11.096924 -16.951889,23.753906 -17.918106,37.757019c-0.607315,8.802002 1.710495,19.011719 6.794357,30.015381c5.070023,11.203613 13.355072,19.614136 24.440247,25.403992c3.754883,1.063049 5.421631,3.187988 5.228394,5.988647c-0.069,1.000244 -1.541763,1.903564 -5.005981,2.468567c-17.930832,-5.860168 -32.294312,-16.700073 -42.91748,-32.105835c-10.609375,-15.605835 -15.465866,-32.824646 -14.541847,-52.05658c2.023293,-20.563049 9.564827,-39.33844 22.610786,-56.125977c13.2603,-16.973816 29.57074,-28.511169 48.931351,-34.612183l-8.9366,-71.97052c-32.648514,23.474854 -59.550636,48.351257 -80.934525,75.01532c-21.370087,26.46405 -33.480858,55.978943 -36.532852,88.530884c-0.606544,14.63092 1.42141,29.041626 6.097679,43.032043c4.66246,14.190491 12.228981,27.174377 22.671944,39.351807c21.10025,24.168518 49.763901,38.005066 85.576111,41.682068c12.287582,0.043823 25.473907,-1.257263 39.759521,-3.889526l-20.274628,-158.77948zm14.576233,-1.004211l20.668411,155.992676c31.737534,-10.271912 49.041763,-36.212524 51.885178,-77.421692c-0.852386,-13.927612 -4.007233,-26.607117 -10.066132,-38.080017c-5.844543,-11.659058 -14.060577,-21.069824 -24.848618,-28.246094c-10.788025,-7.17627 -23.200623,-11.248657 -37.63884,-12.244873zm-26.75383,-210.882782c6.89357,-3.544281 14.996841,-10.02005 23.894958,-19.254913c8.884293,-9.034882 17.692276,-19.883942 26.195831,-32.161011c8.717896,-12.463287 15.845337,-25.237274 21.382339,-38.322021c5.523193,-12.884705 8.598633,-25.335297 9.39917,-36.937866c0.345093,-5.001129 0.289093,-10.029907 -0.409882,-14.500061c-0.305237,-7.256958 -2.124603,-13.010376 -5.672424,-17.074127c-3.561646,-3.863708 -8.236328,-6.196228 -14.252258,-6.611328c-12.03186,-0.83017 -23.371216,5.82431 -34.018097,19.96344c-8.30304,12.290924 -15.568512,27.065369 -21.167236,43.964783c-5.813049,17.085632 -9.606995,34.109589 -11.208908,51.485779c-0.363815,19.873596 1.726639,36.298584 5.856506,49.447327zm-13.434006,10.730896c-6.787811,-33.029846 -9.523605,-66.383118 -8.207397,-100.059753c1.691254,-21.590942 5.291183,-41.64325 10.799805,-60.156891c5.308075,-18.527435 12.241516,-34.329803 20.827866,-47.807098c8.385849,-13.49118 17.740219,-23.498566 27.86261,-30.036041c9.064499,-5.806458 15.51561,-8.77829 18.924652,-8.54306c2.606888,0.179871 4.743713,1.332306 6.624786,3.271057c1.881088,1.938782 4.28096,5.119324 7.213394,9.341583c21.530457,35.454071 30.746521,77.093323 27.461456,124.703888c-1.559723,22.605042 -6.085999,44.402405 -13.620239,65.992188c-7.319916,21.403595 -17.378235,41.613251 -30.147369,60.228882c-12.983459,18.80188 -27.792801,34.864777 -44.642349,48.374969l10.804672,79.938293c8.892365,-0.391479 14.963501,-0.77655 18.372528,-0.541321c15.240341,1.051575 28.655579,5.193176 40.847321,12.466309c12.191742,7.273132 22.42691,16.622192 30.491089,28.233398c8.078003,11.411255 14.040283,24.284424 17.88681,38.619629c3.646027,14.32135 5.2453,29.104492 4.196289,44.307861c-1.628723,23.605225 -9.335907,44.781128 -23.107697,63.327576c-13.77179,18.546448 -33.401154,31.46283 -59.102432,38.935303c0.927917,9.912903 2.755341,24.309753 5.710419,42.804382c2.740738,18.680847 4.741104,33.491638 6.001068,44.432373c1.259949,10.940735 1.344315,21.398438 0.640366,31.600708c-1.090424,15.803589 -5.866699,29.543701 -14.342651,41.420654c-8.676483,11.863159 -19.766617,20.745789 -33.470932,26.634094c-13.503815,5.902161 -28.176682,8.306641 -43.818085,7.227417c-22.05838,-1.521973 -40.881439,-9.051636 -56.483002,-22.388916c-15.587738,-13.537292 -23.265457,-30.749817 -22.604477,-52.01001c1.25032,-9.360474 4.063484,-18.010254 8.653831,-26.135376c4.59034,-8.125122 10.473953,-14.553101 17.851418,-19.269958c7.19072,-4.930786 15.605728,-7.164124 25.072083,-7.113892c7.820694,0.539612 15.088501,3.252014 21.817215,7.937317c6.514374,4.871399 11.728973,11.060059 15.429413,18.752258c3.499893,7.678406 5.139816,16.03241 4.532501,24.834351c-0.814377,11.802673 -5.515121,21.528076 -14.10228,29.176453c-8.587143,7.648376 -19.10408,11.143738 -31.336456,10.299622l-4.612206,-0.318176c6.992531,12.542297 19.398598,19.629211 37.245842,20.860657c9.02388,0.622559 18.386337,-0.741333 27.859207,-3.705688c9.687195,-3.150513 17.852966,-7.612061 24.91217,-13.556885c7.059219,-5.944885 11.940186,-12.441956 14.241852,-19.518982c3.97496,-7.966553 6.365967,-19.258423 7.345963,-33.461609c0.662552,-9.602112 0.322418,-19.273376 -0.819809,-29.000061c-1.156052,-9.526611 -3.093903,-22.32312 -5.827362,-38.189514c-2.747253,-15.666321 -4.726517,-27.862732 -5.764832,-36.175232c-12.238907,2.170471 -24.782227,2.913025 -37.816742,2.013611c-21.857834,-1.508118 -42.208862,-7.33429 -61.039207,-17.678406c-18.83036,-10.344116 -35.019707,-23.923035 -48.754761,-40.950439c-13.534512,-17.013611 -23.722504,-35.806335 -30.536373,-56.778137c-6.62714,-20.757996 -9.375191,-42.253235 -8.057411,-64.271973c2.210022,-20.349182 7.372784,-39.690674 15.861763,-57.59668c8.502769,-18.106018 18.941837,-35.073425 31.503925,-50.688416c12.562096,-15.61499 25.428627,-29.801971 38.585793,-42.360931c13.343895,-12.345093 30.760139,-28.228119 52.635963,-47.421387z" id="path9" stroke-width="0.602291" stroke="#131516" fill-rule="evenodd" style=""/>
</svg>
</svg>
Or you can turn the clef into a <symbol>, and use it that way.
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin" viewBox="0 0 5760 320">
<defs>
<symbol id="gclef" viewBox="36.16 204.35 284.921 811.583">
<path d="m200.680145,652.121826c-12.46701,2.556702 -24.020721,9.3974 -35.04837,20.294373c-11.041428,11.096924 -16.951889,23.753906 -17.918106,37.757019c-0.607315,8.802002 1.710495,19.011719 6.794357,30.015381c5.070023,11.203613 13.355072,19.614136 24.440247,25.403992c3.754883,1.063049 5.421631,3.187988 5.228394,5.988647c-0.069,1.000244 -1.541763,1.903564 -5.005981,2.468567c-17.930832,-5.860168 -32.294312,-16.700073 -42.91748,-32.105835c-10.609375,-15.605835 -15.465866,-32.824646 -14.541847,-52.05658c2.023293,-20.563049 9.564827,-39.33844 22.610786,-56.125977c13.2603,-16.973816 29.57074,-28.511169 48.931351,-34.612183l-8.9366,-71.97052c-32.648514,23.474854 -59.550636,48.351257 -80.934525,75.01532c-21.370087,26.46405 -33.480858,55.978943 -36.532852,88.530884c-0.606544,14.63092 1.42141,29.041626 6.097679,43.032043c4.66246,14.190491 12.228981,27.174377 22.671944,39.351807c21.10025,24.168518 49.763901,38.005066 85.576111,41.682068c12.287582,0.043823 25.473907,-1.257263 39.759521,-3.889526l-20.274628,-158.77948zm14.576233,-1.004211l20.668411,155.992676c31.737534,-10.271912 49.041763,-36.212524 51.885178,-77.421692c-0.852386,-13.927612 -4.007233,-26.607117 -10.066132,-38.080017c-5.844543,-11.659058 -14.060577,-21.069824 -24.848618,-28.246094c-10.788025,-7.17627 -23.200623,-11.248657 -37.63884,-12.244873zm-26.75383,-210.882782c6.89357,-3.544281 14.996841,-10.02005 23.894958,-19.254913c8.884293,-9.034882 17.692276,-19.883942 26.195831,-32.161011c8.717896,-12.463287 15.845337,-25.237274 21.382339,-38.322021c5.523193,-12.884705 8.598633,-25.335297 9.39917,-36.937866c0.345093,-5.001129 0.289093,-10.029907 -0.409882,-14.500061c-0.305237,-7.256958 -2.124603,-13.010376 -5.672424,-17.074127c-3.561646,-3.863708 -8.236328,-6.196228 -14.252258,-6.611328c-12.03186,-0.83017 -23.371216,5.82431 -34.018097,19.96344c-8.30304,12.290924 -15.568512,27.065369 -21.167236,43.964783c-5.813049,17.085632 -9.606995,34.109589 -11.208908,51.485779c-0.363815,19.873596 1.726639,36.298584 5.856506,49.447327zm-13.434006,10.730896c-6.787811,-33.029846 -9.523605,-66.383118 -8.207397,-100.059753c1.691254,-21.590942 5.291183,-41.64325 10.799805,-60.156891c5.308075,-18.527435 12.241516,-34.329803 20.827866,-47.807098c8.385849,-13.49118 17.740219,-23.498566 27.86261,-30.036041c9.064499,-5.806458 15.51561,-8.77829 18.924652,-8.54306c2.606888,0.179871 4.743713,1.332306 6.624786,3.271057c1.881088,1.938782 4.28096,5.119324 7.213394,9.341583c21.530457,35.454071 30.746521,77.093323 27.461456,124.703888c-1.559723,22.605042 -6.085999,44.402405 -13.620239,65.992188c-7.319916,21.403595 -17.378235,41.613251 -30.147369,60.228882c-12.983459,18.80188 -27.792801,34.864777 -44.642349,48.374969l10.804672,79.938293c8.892365,-0.391479 14.963501,-0.77655 18.372528,-0.541321c15.240341,1.051575 28.655579,5.193176 40.847321,12.466309c12.191742,7.273132 22.42691,16.622192 30.491089,28.233398c8.078003,11.411255 14.040283,24.284424 17.88681,38.619629c3.646027,14.32135 5.2453,29.104492 4.196289,44.307861c-1.628723,23.605225 -9.335907,44.781128 -23.107697,63.327576c-13.77179,18.546448 -33.401154,31.46283 -59.102432,38.935303c0.927917,9.912903 2.755341,24.309753 5.710419,42.804382c2.740738,18.680847 4.741104,33.491638 6.001068,44.432373c1.259949,10.940735 1.344315,21.398438 0.640366,31.600708c-1.090424,15.803589 -5.866699,29.543701 -14.342651,41.420654c-8.676483,11.863159 -19.766617,20.745789 -33.470932,26.634094c-13.503815,5.902161 -28.176682,8.306641 -43.818085,7.227417c-22.05838,-1.521973 -40.881439,-9.051636 -56.483002,-22.388916c-15.587738,-13.537292 -23.265457,-30.749817 -22.604477,-52.01001c1.25032,-9.360474 4.063484,-18.010254 8.653831,-26.135376c4.59034,-8.125122 10.473953,-14.553101 17.851418,-19.269958c7.19072,-4.930786 15.605728,-7.164124 25.072083,-7.113892c7.820694,0.539612 15.088501,3.252014 21.817215,7.937317c6.514374,4.871399 11.728973,11.060059 15.429413,18.752258c3.499893,7.678406 5.139816,16.03241 4.532501,24.834351c-0.814377,11.802673 -5.515121,21.528076 -14.10228,29.176453c-8.587143,7.648376 -19.10408,11.143738 -31.336456,10.299622l-4.612206,-0.318176c6.992531,12.542297 19.398598,19.629211 37.245842,20.860657c9.02388,0.622559 18.386337,-0.741333 27.859207,-3.705688c9.687195,-3.150513 17.852966,-7.612061 24.91217,-13.556885c7.059219,-5.944885 11.940186,-12.441956 14.241852,-19.518982c3.97496,-7.966553 6.365967,-19.258423 7.345963,-33.461609c0.662552,-9.602112 0.322418,-19.273376 -0.819809,-29.000061c-1.156052,-9.526611 -3.093903,-22.32312 -5.827362,-38.189514c-2.747253,-15.666321 -4.726517,-27.862732 -5.764832,-36.175232c-12.238907,2.170471 -24.782227,2.913025 -37.816742,2.013611c-21.857834,-1.508118 -42.208862,-7.33429 -61.039207,-17.678406c-18.83036,-10.344116 -35.019707,-23.923035 -48.754761,-40.950439c-13.534512,-17.013611 -23.722504,-35.806335 -30.536373,-56.778137c-6.62714,-20.757996 -9.375191,-42.253235 -8.057411,-64.271973c2.210022,-20.349182 7.372784,-39.690674 15.861763,-57.59668c8.502769,-18.106018 18.941837,-35.073425 31.503925,-50.688416c12.562096,-15.61499 25.428627,-29.801971 38.585793,-42.360931c13.343895,-12.345093 30.760139,-28.228119 52.635963,-47.421387z" id="path9" stroke-width="0.602291" stroke="#131516" fill-rule="evenodd" style=""/>
</symbol>
</defs>
<rect width="100%" height="100%" fill="white"></rect>
<line x1="0" y1="80" x2="5760" y2="80" stroke="black" stroke-width="4"></line>
<line x1="0" y1="120" x2="5760" y2="120" stroke="black" stroke-width="4"></line>
<line x1="0" y1="160" x2="5760" y2="160" stroke="black" stroke-width="4"></line>
<line x1="0" y1="200" x2="5760" y2="200" stroke="black" stroke-width="4"></line>
<line x1="0" y1="240" x2="5760" y2="240" stroke="black" stroke-width="4"></line>
<use href="#gclef" x="20" y="0" width="100"/>
</svg>

Why do two of my SVGs load as the same one in React?

This is almost definitely an issue with the SVG code itself. I have 2 SVGs from Figma and I load them into ReactJS as ReactComponents, regular stuff. Issue is that for some reason React sees them as the same SVG despite their SVG code being different. I suspect this to be an issue within the SVG code of these 2 SVGs because the same issue does not occur with other SVGs.
This is one SVG (I shorten the xlink:href in the end as it is too long):
<svg width="1215" height="550" viewBox="0 0 1215 550" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group 9">
<rect id="Thousand-02 1" y="16" width="696.273" height="534" fill="url(#pattern0)"/>
<path id="element2" d="M1194.87 470.154C1192.44 465.157 1194.81 459.222 1200.08 456.911C1205.35 454.599 1211.6 456.848 1214.04 461.846C1216.48 466.843 1214.11 472.778 1208.84 475.089C1203.57 477.401 1197.31 475.152 1194.87 470.154ZM1197.77 468.905C1199.48 472.403 1203.83 473.965 1207.59 472.341C1211.27 470.716 1212.92 466.593 1211.21 463.033C1209.5 459.472 1205.15 457.973 1201.39 459.597C1197.71 461.221 1196.06 465.407 1197.77 468.905Z" fill="url(#paint0_linear)"/>
<path id="element" d="M738.216 20.5325L738.137 14.0237C738.171 13.7748 738.382 13.5477 738.657 13.4976L745.55 13.4265C745.813 13.4593 746.024 13.2323 746.07 12.9004L746.038 9.2672C746.072 9.0183 745.832 8.81957 745.48 8.77585L738.588 8.84686C738.324 8.81407 738.083 8.61534 738.03 8.35551L737.951 1.84671C737.985 1.5978 737.745 1.39908 737.393 1.35535L733.546 1.38317C733.282 1.35038 733.072 1.57742 733.026 1.90929L733.105 8.41809C733.071 8.66699 732.86 8.89404 732.585 8.94421L725.692 9.01524C725.429 8.98245 725.218 9.20949 725.172 9.54136L725.204 13.1746C725.17 13.4235 725.41 13.6222 725.762 13.6659L732.654 13.5949C732.918 13.6277 733.159 13.8264 733.212 14.0863L733.291 20.5951C733.257 20.844 733.497 21.0427 733.849 21.0864L737.696 21.0586C737.971 21.0084 738.182 20.7814 738.216 20.5325Z" fill="#FDD08D"/>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="translate(0 -0.0282801) scale(0.00151745 0.00197858)"/>
</pattern>
<linearGradient id="paint0_linear" x1="1200.22" y1="456.866" x2="1208.02" y2="475.462" gradientUnits="userSpaceOnUse">
<stop stop-color="#BFF0DD"/>
<stop offset="1" stop-color="#57D2A3"/>
</linearGradient>
<image id="image1" data-name="Thousand-02.png" width="659" height="534" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApMAAAIWCAYAAAALawaWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAz4ESURBVHgB7L0JoF5VdS++9nfnm5vkZiRzLpAAYUyYFdEg4KwEaat9ao19RUFtwf+Tvvbpe4TWZ/vap6CtA9oK2tr2WZXBeSJBQWYIIPOQG8g83uQmueN31n9Pa++199nnu98NSbiB80u
And this is the other SVG:
<svg width="1415" height="654" viewBox="0 0 1415 654" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group 8">
<rect id="thousand-01 1" x="728" width="687" height="654" fill="url(#pattern0)"/>
<path id="element3" d="M606.673 131.912L605.75 125.469C605.75 125.218 605.918 124.967 606.169 124.883L612.628 123.962C612.88 123.962 613.048 123.711 613.048 123.377L612.545 119.778C612.545 119.527 612.293 119.36 611.957 119.36L605.498 120.28C605.247 120.28 604.995 120.113 604.911 119.862L603.989 113.418C603.989 113.167 603.737 113 603.401 113L599.794 113.502C599.543 113.502 599.375 113.753 599.375 114.088L600.298 120.531C600.298 120.782 600.13 121.033 599.878 121.117L593.419 122.038C593.168 122.038 593 122.289 593 122.623L593.503 126.222C593.503 126.473 593.755 126.64 594.09 126.64L600.549 125.72C600.801 125.72 601.053 125.887 601.137 126.138L602.059 132.582C602.059 132.833 602.311 133 602.646 133L606.253 132.498C606.505 132.414 606.673 132.163 606.673 131.912Z" fill="#FDD08D"/>
<path id="element" d="M652.909 630.154C650.602 625.157 652.846 619.222 657.834 616.911C662.821 614.599 668.743 616.848 671.05 621.846C673.356 626.843 671.112 632.778 666.125 635.089C661.138 637.401 655.215 635.152 652.909 630.154ZM655.652 628.905C657.272 632.403 661.387 633.965 664.94 632.341C668.431 630.716 669.99 626.593 668.369 623.033C666.748 619.472 662.634 617.973 659.08 619.597C655.589 621.221 654.031 625.407 655.652 628.905Z" fill="url(#paint0_linear)"/>
<path id="element2" d="M1.18132 345.401C-1.81721 338.904 1.10028 331.189 7.58359 328.184C14.0669 325.179 21.7658 328.103 24.7644 334.599C27.7629 341.096 24.8454 348.811 18.3621 351.816C11.8788 354.821 4.17986 351.897 1.18132 345.401ZM4.74714 343.776C6.85422 348.324 12.203 350.354 16.8223 348.243C21.3606 346.131 23.3867 340.772 21.2796 336.142C19.1725 331.513 13.8238 329.564 9.20442 331.676C4.6661 333.787 2.64006 339.228 4.74714 343.776Z" fill="url(#paint1_linear)"/>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="scale(0.0014556)"/>
</pattern>
<linearGradient id="paint0_linear" x1="657.971" y1="616.866" x2="666.07" y2="635.144" gradientUnits="userSpaceOnUse">
<stop stop-color="#BFF0DD"/>
<stop offset="1" stop-color="#57D2A3"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="7.7622" y1="328.126" x2="18.2915" y2="351.887" gradientUnits="userSpaceOnUse">
<stop stop-color="#BFF0DD"/>
<stop offset="1" stop-color="#57D2A3"/>
</linearGradient>
<image id="image0" data-name="thousand-01.png" width="687" height="654" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAq8AAAKOCAYAAACIkfAOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUABANcSURBVHgB7P0JnFxHft8J/iIzK+sGqnADBMEim1ffQHdLsqYtEZTGktsaqdmWPZLtsUjtyvJovOtm27OzO+ORAVpH2

animation playing on emulator and not on device windows phone 8.1

I am developing an application and trying to achieve a sort of flip effect(like flipboard)
this is my xaml.
<Page.Resources>
<Storyboard x:Name="FlipBottomStoryboard">
<DoubleAnimation Duration="0:0:1.1" To="-80.9" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</Page.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Stroke="Black" Fill="#FF4E608F"/>
</Grid>
<Grid x:Name="grid" Grid.Row="2" Grid.RowSpan="2" Canvas.ZIndex="1">
<Grid.Projection>
<PlaneProjection CenterOfRotationX="0" CenterOfRotationY="0"/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Media:ControlStoryboardAction Storyboard="{StaticResource FlipBottomStoryboard}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Rectangle Fill="#FF3DDA24" Stroke="Black" Grid.Row="1"/>
</Grid>
<Rectangle Stroke="Black" Grid.Row="1" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFA65757"/>
<GradientStop Color="#FF0A2E26" Offset="0.966"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
In short the grid on the lower half animates its RotationX when it is tapped.
The problem is that on the emulator(WVGA 4 inch 512mb) this works well but on the device (lumia 630 512mb) the animation jumps from the initial position to the end. Also the framerate drops to 30.
Any help is welcome on the matter

OpacityMask on Image in windows phone 8.1

In a windows phone 8.1 runtime app I need to crop an image using a circle, to doing this i have used this code:
<Ellipse x:Name="ellipse" Stroke="White" StrokeThickness="1" StrokeDashArray="3,3" Height="300" Width="300" Canvas.ZIndex="1" VerticalAlignment="Center" HorizontalAlignment="Center" >
<Ellipse.Fill>
<ImageBrush Stretch="UniformToFill" ImageSource="{Binding Source, ElementName=image}"/>
</Ellipse.Fill>
</Ellipse>
<Grid Background="Black" >
<Image x:Name="image" Source="ms-appx:///Assets/avatar.png" VerticalAlignment="Center" Stretch="UniformToFill" HorizontalAlignment="Center" Height="300" Opacity="0.5" />
</Grid>
this is the result:
for render the ellipse i use this code:
var bitmap = new RenderTargetBitmap();
await bitmap.RenderAsync(ellipse);
I have to let the user translate and zoom this image, how can i manipulate those 2 images in a way that they looks one image?
Ok so after variour research and various test this is the solution to my problem.
With tis code you can handle full manipulation event including rotation zoom and translation!
XAML:
<Grid x:Name="LayoutRoot" Background="Black">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" x:Name="ContentRoot" RenderTransformOrigin="0.5,0.5" Opacity="0.5" >
<Image x:Name="Image" Source="ms-appx:///Assets/AccountManagement/avatar.png" VerticalAlignment="Center" Stretch="UniformToFill" ScrollViewer.HorizontalScrollBarVisibility="Visible" HorizontalAlignment="Center" Height="300" RenderTransformOrigin="0.5,0.5" >
<Image.RenderTransform>
<CompositeTransform x:Name="ImageCompositeTransform" Rotation="0" TranslateX="0" TranslateY="0" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>
</Grid>
<Ellipse ManipulationDelta="Ellipse_ManipulationDelta" x:Name="Ellipse" Stroke="White" StrokeThickness="1" StrokeDashArray="3,3" Height="300" Width="300" Canvas.ZIndex="1" Margin="0" Grid.Row="1" VerticalAlignment="Center" d:LayoutOverrides="Height" HorizontalAlignment="Center" ManipulationMode="All" RenderTransformOrigin="0.5,0.5" >
<Ellipse.Fill>
<ImageBrush Stretch="UniformToFill" ImageSource="{Binding Source, ElementName=Image}">
<ImageBrush.Transform>
<CompositeTransform CenterX="150" CenterY="150" ScaleX="{Binding ScaleX, ElementName=ImageCompositeTransform}" ScaleY="{Binding ScaleY, ElementName=ImageCompositeTransform}" TranslateX="{Binding TranslateX, ElementName=ImageCompositeTransform}" TranslateY="{Binding TranslateY, ElementName=ImageCompositeTransform}" Rotation="{Binding Rotation, ElementName=ImageCompositeTransform}" />
</ImageBrush.Transform>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
C#:
private void Ellipse_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
ImageCompositeTransform.ScaleX *= e.Delta.Scale;
ImageCompositeTransform.ScaleY *= e.Delta.Scale;
ImageCompositeTransform.Rotation += e.Delta.Rotation / Math.PI;
ImageCompositeTransform.TranslateX += e.Delta.Translation.X;
ImageCompositeTransform.TranslateY += e.Delta.Translation.Y;
}

textblock position and sizing

I'm new in WPF, implementing the application using MVVM pattern.
Border is container which contain path and textblock. textblock contain number.
Width and height of border control binded with viewmodel property.
want to show textblock contain i.e. number in middle of border container and path object on left top side of border container.
how to set the position of textblock in middle of border control.
<Border BorderThickness="5" BorderBrush="#FF30333A" Width="{Binding Width}" Background="#FF1C2125"
Height="{Binding Height}"
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Path Name="starPath" Fill="Gray" Data="M 9,0 L 7,6 L 0,6 L 6,11 L 4,17 L 9,12 L 14,17 L 12,11 L 18,6 L 11,6 L 9,0">
</Path>
<TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="1" Text="2" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="20" Foreground="White" Background="Gray">
</TextBlock>
</Grid>
</Border>
Try this :
<Border BorderThickness="5" BorderBrush="#FF30333A" Width="{Binding Width}" background="#FF1C2125" Height="{Binding Height}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Path Grid.Row="0" HorizontalAlignment="Left" Name="starPath" Fill="Gray" Data="M 9,0 L 7,6 L 0,6 L 6,11 L 4,17 L 9,12 L 14,17 L 12,11 L 18,6 L 11,6 L 9,0"/>
<TextBloc Grid.Row="1" Text="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="20"/>
</Grid>
</Border>
So ? does it works ?