Related
I'm using Chartist.js to work on a pie chart.
I am trying to add a simple circle in the background, but for some reason the circle element just ends up in the top left corner with 0x0 dimensions.
Here is the SVG:
<div class="contents" id="chart-container">
<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie" style="width: 100%; height: 100%;" viewBox="0 0 359 219">
<g class="basecircle">
<cirlce class="basecircleelement" cx="10" cy="10" fill="black" cr="181.76999999999998">
</cirlce>
</g>
<g ct:series-name="value" class="ct-series ct-series-a">
<path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
</g>
<g ct:series-name="rest" class="ct-series ct-series-b">
<path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
</g>
</svg>
</div>
I expected the "g.basecircle" and "circle.basecircleelement" should be showing up(It's supposed to be in the center of the container but I didn't calculate the cx and cy yet) with radius of 181.76999999999998 -this value is calculated to be half of the clientWidth-, but it ends up in the upper left corner of the SVG element with dimension of 0 x 0
Is there anything I am missing?
this value is calculated to be half of the clientWidth-, but it ends
up in the upper left corner of the SVG element with dimension of 0 x 0
Typos must be fixed:
circle instead ofcirlce
Radius designation -r instead ofcr
Svg canvas borders are bounded by a red square style = "border: 1px solid red;"
It is very convenient to visually see the borders of SVG. When you finish debugging your application, this line can be removed.
To place the black circle in the center of the svg canvas, you need to set the coordinates cx =" 359/2 " cy =" 219/2 "
<div class="contents" id="chart-container">
<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie" viewBox="0 0 359 219" style="border:1px solid red;">
<g class="basecircle">
<circle class="basecircleelement" cx="179.5" cy="109.5" fill="black" r="179.5">
</circle>
</g>
<g ct:series-name="value" class="ct-series ct-series-a">
<path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
</g>
<g ct:series-name="rest" class="ct-series ct-series-b">
<path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
</g>
</svg>
</div>
Update
If you want the black circle to not form and completely fit on the canvas svg you need to set its radius equal to half the height of the canvas r= 219 / 2 = 109.5
<div class="contents" id="chart-container">
<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie" viewBox="0 0 359 219" style="border:1px solid red;">
<g class="basecircle">
<circle class="basecircleelement" cx="179.5" cy="109.5" fill="black" r="109.5">
</circle>
</g>
<g ct:series-name="value" class="ct-series ct-series-a">
<path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
</g>
<g ct:series-name="rest" class="ct-series ct-series-b">
<path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
</g>
</svg>
</div>
Is there a way to set the origin of CSS animation (transform - rotation) relatively to x,y of the element <use/> with CSS?
There might be several <use/> in a given <svg/> at different places:
absolute position of each element might not be hard coded in CSS.
.spin {
transition:4s linear;
-webkit-transition:4s linear;
}
.spin:hover {
transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform:rotateZ(360eg);
-webkit-transform:rotateZ(360deg);
}
<body>
<svg width="200" height="200" viewBox="0 0 200 200" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<path id="shape1" d="M0,0 V20 H20 Z" fill="red" stroke="red" stroke-width="0" />
</defs>
<circle cx="0" cy="0" r="80" fill="none" stroke="green"/>
<use xlink:href="#shape1" x="40" y="40" class="spin" />
</svg>
</body>
Animating the transform of a <use> is complicated by the fact that you are using the x and y attributes. The spec says that:
The x and y properties define an additional transformation (translate(x,y), ...
This extra transform component can mess with the transform you are animating, and produce unexpected effects.
The simple fix is to remove the x and y attributes, and use a parent <g> element to set the position of the path.
<g transform="translate(40,40)">
<use xlink:href="#shape1" class="spin" />
</g>
Updated example
.spin {
transition:4s linear;
-webkit-transition:4s linear;
}
.spin:hover {
transform-origin: 0px 0px;
-webkit-transform-origin: 0px 0px;
transform:rotateZ(360eg);
-webkit-transform:rotateZ(360deg);
}
<body>
<svg width="200" height="200" viewBox="0 0 200 200" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<path id="shape1" d="M0,0 V20 H20 Z" fill="red" stroke="red" stroke-width="0" />
</defs>
<circle cx="0" cy="0" r="80" fill="none" stroke="green"/>
<g transform="translate(40,40)">
<use xlink:href="#shape1" class="spin" />
</g>
</svg>
</body>
I would like to have a responsive SVG for a line chart. This should have three areas that combine fixed and scalable elements.
The pink element should be a scaling child svg (I need to define a child coordinate system for drawing a polyline), the grey bits are used for drawing axis, and should have limited scaling, since text should render in a relativaly simple font.
Finally, I would like to do this without JavaScript.
Some of the problems I have faced and which might help with a solution:
If I could give the <svg> element that is the pink area the following x="20px" width="calc(100% - 20px)" height="calc(100% - 20px)", this would largely solve my problem, but this triggers a parse error. I haven't managed to get any variations using CSS to work either.
(Another answer would be well worth it if someone can do this with "pure" svg).
I hacked it using HTML layout and multiple SVGs. This is the code I am using:
<div style="width: 100%; height: 300px">
<!-- The Y axis -->
<svg style="width: 40px; height: calc(100% - 20px); float: left;">
<g class="yaxis">
<line x1="99%" x2="99%" y1="0%" y2="100%" stroke="black" vector-effect="non-scaling-stroke"></line>
<g class="tick tick-yaxis">
<text x="99%" y="100%" text-anchor="end">$0.0</text>
<line x1="98%" x2="100%" y1="100%" y2="100%" stroke="black"></line>
</g>
<!-- ... -->
</g>
</g>
</svg>
<!-- The actual chart -->
<svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width: calc(100% - 40px); height: calc(100% - 20px); float: left;">
<polyline points="0,50 45.46574414322495,0 65,100 75,100 89.52839708894965,0 91.10141646672459,100 98.21939424857649,0 100,100"
vector-effect="non-scaling-stroke" stroke="red" fill="none"></polyline>
</svg>
<!-- x axis -->
<svg style="clear: both; margin-left: 40px; width: calc(100% - 40px); height: 20px;">
<g class="xaxis">
<line x1="0%" x2="100%" y1="1%" y2="1%" stroke="black" vector-effect="non-scaling-stroke"></line>
<g class="tick tick-xaxis">
<text x="5%" y="100%" text-anchor="middle">28 Feb 2011</text>
<line x1="5%" x2="5%" y1="94%" y2="96%" stroke="black"></line>
</g>
</svg>
</div>
Add vector-effect="non-scaling-stroke" to your path
div {
width: 100%;
height: 180px;
background: #f5f5f5;
background: none;
}
svg > path{
stroke: teal;
stroke-width: 3;
fill: none;
}
#SVGgrid {opacity: 0.15;}
.SVGLines{filter: drop-shadow(0.9px 4px 0.6px rgba(0,0,0,0.15));}
.red {stroke: #fa7a17;}
.blue {stroke: #4185f5;}
.yellow {stroke: #fbbd04;}
<div>
<svg viewBox="0 0 52 100" preserveAspectRatio="none" style="width: 100%; height: 100%;">
<defs>
<pattern id="SVGGT" patternUnits="userSpaceOnUse" width="1" height="4">
<line x1="1" y1="0" x2="1" y2="10" vector-effect="non-scaling-stroke" stroke="black"/>
<line x1="0" y1="4" x2="4" y2="4" vector-effect="non-scaling-stroke" stroke="black"/>
</pattern>
</defs>
<rect id="SVGgrid" width="100%" height="100%" fill="url(#SVGGT)" />
<path class="SVGLines red" vector-effect="non-scaling-stroke" d="
M 0.1,59
S 0.5,60 1,59
S 1.5,59 2,57
S 2.5,58 3,55
S 3.5,56 4,54
S 4.5,55 5,53
S 5.5,53 6,52
S 6.5,51 7,51
S 7.5,50 8,49
S 8.5,47 9,48
S 9.5,46 10,46
S 10.5,42 11,43
S 11.5,43 12,42
S 12.5,40 13,39
S 13.5,36 14,36
S 14.5,36 15,35
S 15.5,33 16,33
S 16.5,33 17,30
S 17.5,25 18,27
S 18.5,28 19,26
S 19.5,26 20,24
S 20.5,23 21,21
S 21.5,22 22,20
S 22.5,22 23,23
S 23.5,25 24,26
S 24.5,28 25,27
S 25.5,27 26,28
S 26.5,29 27,29
S 27.5,34 28,31
S 28.5,35 29,34
S 29.5,37 30,35
S 30.5,38 31,37
S 31.5,41 32,38
S 32.5,38 33,40
S 33.5,41 34,41
S 34.5,44 35,44
S 35.5,50 36,47
S 36.5,53 37,50
S 37.5,53 38,53
S 38.5,57 39,56
S 39.5,56 40,55
S 40.5,52 41,53
S 41.5,54 42,51
S 42.5,50 43,50
S 43.5,47 44,47
S 44.5,49 45,46
S 45.5,46 46,45
S 46.5,45 47,42
S 47.5,41 48,41
S 48.5,43 49,40
S 49.5,36 50,38
S 50.5,34 51,36
S 51.5,34 52,33
" stroke="black" fill="transparent" stroke-linecap="round"/>
<path class="SVGLines blue" vector-effect="non-scaling-stroke" d="
M 0.1,25
S 0.5,26 1,25
S 1.5,26 2,27
S 2.5,31 3,30
S 3.5,31 4,31
S 4.5,32 5,34
S 5.5,36 6,35
S 6.5,38 7,36
S 7.5,38 8,38
S 8.5,41 9,41
S 9.5,39 10,39
S 10.5,34 11,36
S 11.5,35 12,33
S 12.5,33 13,32
S 13.5,33 14,30
S 14.5,29 15,28
S 15.5,26 16,27
S 16.5,25 17,26
S 17.5,23 18,25
S 18.5,25 19,22
S 19.5,23 20,21
S 20.5,20 21,19
S 21.5,17 22,16
S 22.5,17 23,14
S 23.5,14 24,11
S 24.5,14 25,13
S 25.5,18 26,16
S 26.5,18 27,19
S 27.5,25 28,22
S 28.5,17 29,19
S 29.5,19 30,17
S 30.5,14 31,16
S 31.5,14 32,14
S 32.5,13 33,13
S 33.5,11 34,10
S 34.5,13 35,11
S 35.5,10 36,12
S 36.5,15 37,14
S 37.5,17 38,16
S 38.5,14 39,13
S 39.5,16 40,16
S 40.5,19 41,18
S 41.5,21 42,19
S 42.5,19 43,20
S 43.5,20 44,21
S 44.5,24 45,23
S 45.5,22 46,24
S 46.5,28 47,27
S 47.5,28 48,28
S 48.5,29 49,29
S 49.5,34 50,31
S 50.5,36 51,33
S 51.5,34 52,34
" stroke="black" fill="transparent" stroke-linecap="round"/>
<path class="SVGLines yellow" vector-effect="non-scaling-stroke" d="
M 0.1,75
S 0.5,78 1,75
S 1.5,76 2,78
S 2.5,84 3,81
S 3.5,81 4,82
S 4.5,86 5,85
S 5.5,86 6,87
S 6.5,89 7,90
S 7.5,91 8,88
S 8.5,85 9,86
S 9.5,85 10,83
S 10.5,79 11,81
S 11.5,79 12,78
S 12.5,78 13,75
S 13.5,72 14,72
S 14.5,68 15,70
S 15.5,65 16,67
S 16.5,65 17,66
S 17.5,68 18,65
S 18.5,66 19,63
S 19.5,62 20,61
S 20.5,60 21,60
S 21.5,55 22,57
S 22.5,59 23,56
S 23.5,52 24,53
S 24.5,57 25,54
S 25.5,59 26,56
S 26.5,60 27,59
S 27.5,63 28,60
S 28.5,62 29,62
S 29.5,58 30,60
S 30.5,57 31,57
S 31.5,52 32,54
S 32.5,55 33,52
S 33.5,51 34,51
S 34.5,50 35,48
S 35.5,46 36,46
S 36.5,47 37,44
S 37.5,42 38,41
S 38.5,41 39,39
S 39.5,37 40,36
S 40.5,37 41,34
S 41.5,31 42,32
S 42.5,31 43,30
S 43.5,28 44,27
S 44.5,25 45,26
S 45.5,27 46,24
S 46.5,23 47,21
S 47.5,21 48,18
S 48.5,20 49,17
S 49.5,13 50,15
S 50.5,16 51,14
S 51.5,11 52,12
" stroke="black" fill="transparent" stroke-linecap="round"/>
</svg>
</div>
I am trying to accomplish a precise layered effect for text in SVG. My current solution below just copies and pastes the group element with the text elements inside correcting the x and y coordinates for each. I saw from another solution def and reuse and transform for shapes.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 960 640" style="background-color:#def">
<g style="font-family: Arial Black; font-weight: bold;" fill="rgba(244, 164, 96, 0.45)">
<text text-anchor="middle" x="480" y="610" font-size="160px">♥</text>
<text x="95" y="265" font-size="160px">PASSION</text>
<text x="395" y="345" font-size="80px">FOR</text>
<text x="135" y="485" font-size="160px">PEOPLE</text>
</g>
<g style="font-family: Arial Black; font-weight: bold;" fill="#def">
<text x="439" y="601" font-size="160px">♥</text>
<text x="99" y="261" font-size="160px">PASSION</text>
<text x="399" y="341" font-size="80px">FOR</text>
<text x="139" y="481" font-size="160px">PEOPLE</text>
</g>
<g style="font-family: Arial Black; font-weight: bold;" fill="orange">
<text x="440" y="600" font-size="160px">♥</text>
<text x="100" y="260" font-size="160px">PASSION</text>
<text x="400" y="340" font-size="80px">FOR</text>
<text x="140" y="480" font-size="160px">PEOPLE</text>
</g>
To achieve the effect you want, define the shape within a defs section and then refer to it from a use element.
So the equivalent of your sample document is:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
preserveAspectRatio="xMinYMin meet"
width="100%" height="100%"
viewBox="0 0 960 640"
style="background-color:#def">
<defs>
<g id="passion" style="font-family: Arial Black; font-weight: bold;">
<text x="440" y="600" font-size="160px">♥</text>
<text x="100" y="260" font-size="160px">PASSION</text>
<text x="400" y="340" font-size="80px">FOR</text>
<text x="140" y="480" font-size="160px">PEOPLE</text>
</g>
</defs>
<use xlink:href="#passion" transform="translate(-5,5)" fill="rgba(244, 164, 96, 0.45)" />
<use xlink:href="#passion" transform="translate(-1,1)" fill="#def" />
<use xlink:href="#passion" fill="orange" />
</svg>
Don't forget to define the xlink namespace in your root svg element. Otherwise you'll get an error.
Attempting to extract data embed in Raphael SVGs, and hacking my way through options to get to the data. Currently, I've found what appears to be the SVG file with the data (this based on using Firebug and watch the data-swaps as the timeline changes) -- and attempting to convert the SVG into a stand alone SVG to confirm that at least visually the file appear to be the graph I'm looking at.
Here's the Raphael SVGs (or at least an SVG I'm not able to dump into an SVG template file I'm using and load without error):
<svg height="67" version="1.1" width="840" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: 0px; top: 0px;">
<desc>Created with Raphaël 2.1.0</desc>
<defs>
<rect x="0" y="0" width="840" height="67" r="0" rx="0" ry="0" fill="#ebebeb" stroke="none" style="">
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,1.5L67,1.5Z" stroke-width="1" opacity="1">
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,3.5L67,3.5Z" stroke-width="1" opacity="1">
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,7.5L67,7.5Z" stroke-width="1" opacity="1">
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,15.5L67,15.5Z" stroke-width="1" opacity="1">
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,32.5L67,32.5Z" stroke-width="1" opacity="1">
<path style="opacity: 1;" fill="#aaaaaa" stroke="none" d="M0,67L0,0L0,31L2.310344827586207,34L4.620689655172414,35L6.931034482758621,38L9.241379310344827,39L11.551724137931034,41L13.862068965517242,41L16.17241379310345,41L18.482758620689655,37L20.79310344827586,39L23.103448275862068,40L25.413793103448274,41L27.724137931034484,41L30.03448275862069,45L32.3448275862069,45L34.6551724137931,44L36.96551724137931,41L39.275862068965516,41L41.58620689655172,43L43.89655172413793,43L46.206896551724135,44L48.51724137931034,44L50.82758620689655,41L53.137931034482754,34L55.44...2068965517241,17L785.5172413793103,16L787.8275862068965,17L790.1379310344828,21L792.448275862069,22L794.7586206896551,23L797.0689655172414,21L799.3793103448276,20L801.6896551724137,17L804,12L806.3103448275862,15L808.6206896551724,16L810.9310344827586,17L813.2413793103448,15L815.551724137931,16L817.8620689655172,17L820.1724137931035,17L822.4827586206897,18L824.7931034482758,19L827.1034482758621,19L829.4137931034483,17L831.7241379310344,16L834.0344827586207,16L836.3448275862069,17L838.6551724137931,2L840,67" stroke-width="0" opacity="1" transform="matrix(1,0,0,1,-554.3785,0)">
<path style="opacity: 1;" fill="none" stroke="#666666" d="M0,31L2.310344827586207,34L4.620689655172414,35L6.931034482758621,38L9.241379310344827,39L11.551724137931034,41L13.862068965517242,41L16.17241379310345,41L18.482758620689655,37L20.79310344827586,39L23.103448275862068,40L25.413793103448274,41L27.724137931034484,41L30.03448275862069,45L32.3448275862069,45L34.6551724137931,44L36.96551724137931,41L39.275862068965516,41L41.58620689655172,43L43.89655172413793,43L46.206896551724135,44L48.51724137931034,44L50.82758620689655,41L53.137931034482754,34L55.44827586206...17L783.2068965517241,17L785.5172413793103,16L787.8275862068965,17L790.1379310344828,21L792.448275862069,22L794.7586206896551,23L797.0689655172414,21L799.3793103448276,20L801.6896551724137,17L804,12L806.3103448275862,15L808.6206896551724,16L810.9310344827586,17L813.2413793103448,15L815.551724137931,16L817.8620689655172,17L820.1724137931035,17L822.4827586206897,18L824.7931034482758,19L827.1034482758621,19L829.4137931034483,17L831.7241379310344,16L834.0344827586207,16L836.3448275862069,17L838.6551724137931,2" stroke-width="2" opacity="1" transform="matrix(1,0,0,1,-554.3785,0)">
</svg>
How do I edit the SVG above to load as a standalone SVG file in the most recent version of FireFox?
My Firefox shows two problems:
the ë inside the <desc> tag is not a valid character. Remove the character or the whole <desc>.
most of the used tags ( <defs>, <rect>, <path> ) are not closed. Just change the > at the end to />.
I doubt, however, that this SVG shows your desired result.
<svg height="67" version="1.1" width="840" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: 0px; top: 0px;">
<defs />
<rect x="0" y="0" width="840" height="67" r="0" rx="0" ry="0" fill="#ebebeb" stroke="none" style="" />
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,1.5L67,1.5Z" stroke-width="1" opacity="1" />
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,3.5L67,3.5Z" stroke-width="1" opacity="1" />
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,7.5L67,7.5Z" stroke-width="1" opacity="1" />
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,15.5L67,15.5Z" stroke-width="1" opacity="1" />
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,32.5L67,32.5Z" stroke-width="1" opacity="1" />
<path style="opacity: 1;" fill="#aaaaaa" stroke="none" d="M0,67L0,0L0,31L2.310344827586207,34L4.620689655172414,35L6.931034482758621,38L9.241379310344827,39L11.551724137931034,41L13.862068965517242,41L16.17241379310345,41L18.482758620689655,37L20.79310344827586,39L23.103448275862068,40L25.413793103448274,41L27.724137931034484,41L30.03448275862069,45L32.3448275862069,45L34.6551724137931,44L36.96551724137931,41L39.275862068965516,41L41.58620689655172,43L43.89655172413793,43L46.206896551724135,44L48.51724137931034,44L50.82758620689655,41L53.137931034482754,34L55.44...2068965517241,17L785.5172413793103,16L787.8275862068965,17L790.1379310344828,21L792.448275862069,22L794.7586206896551,23L797.0689655172414,21L799.3793103448276,20L801.6896551724137,17L804,12L806.3103448275862,15L808.6206896551724,16L810.9310344827586,17L813.2413793103448,15L815.551724137931,16L817.8620689655172,17L820.1724137931035,17L822.4827586206897,18L824.7931034482758,19L827.1034482758621,19L829.4137931034483,17L831.7241379310344,16L834.0344827586207,16L836.3448275862069,17L838.6551724137931,2L840,67" stroke-width="0" opacity="1" transform="matrix(1,0,0,1,-554.3785,0)" />
<path style="opacity: 1;" fill="none" stroke="#666666" d="M0,31L2.310344827586207,34L4.620689655172414,35L6.931034482758621,38L9.241379310344827,39L11.551724137931034,41L13.862068965517242,41L16.17241379310345,41L18.482758620689655,37L20.79310344827586,39L23.103448275862068,40L25.413793103448274,41L27.724137931034484,41L30.03448275862069,45L32.3448275862069,45L34.6551724137931,44L36.96551724137931,41L39.275862068965516,41L41.58620689655172,43L43.89655172413793,43L46.206896551724135,44L48.51724137931034,44L50.82758620689655,41L53.137931034482754,34L55.44827586206...17L783.2068965517241,17L785.5172413793103,16L787.8275862068965,17L790.1379310344828,21L792.448275862069,22L794.7586206896551,23L797.0689655172414,21L799.3793103448276,20L801.6896551724137,17L804,12L806.3103448275862,15L808.6206896551724,16L810.9310344827586,17L813.2413793103448,15L815.551724137931,16L817.8620689655172,17L820.1724137931035,17L822.4827586206897,18L824.7931034482758,19L827.1034482758621,19L829.4137931034483,17L831.7241379310344,16L834.0344827586207,16L836.3448275862069,17L838.6551724137931,2" stroke-width="2" opacity="1" transform="matrix(1,0,0,1,-554.3785,0)" />
</svg>