Modifying SVG files flutter - flutter

I have an svg file of the human body with groups of traces made for each muscle. I'd like to make a function that highlights certain muscles. Using regex is not the right way to go. I tried using xml but I'm not sure how to do it the right way and I'm not sure if xml truly is the right way.
This is the structure of my svg file:
<svg>
<g id="Muscles" transform="translate(-0.146 0.364)">
<g id="Abdominals">
<path id="path196" d="M3294.281-2851.382c-15.892,20.521-35.62,44.154-48.66,64.122,0,0,31.81-113.859-15.028-518.839,0,0,65.728,78.144,94.49,251.4,0,0,10.452,150.03-30.8,203.315" transform="translate(-1825.079 4663.033)" fill="#95999f"/>
<path id="path234" d="M3671.994-2915.5c15.893,20.542,35.6,44.178,48.659,64.119,0,0-23.994-49.737,22.844-454.717,0,0-65.7,78.144-94.491,251.4,0,0-18.265,85.908,22.988,139.2" transform="translate(-1494.489 4663.033)" fill="#95999f"/>
</g>
...
...
<g id="Triceps">
<path id="path198" d="M3172.882-3654.165s-144.517,96.743-129.823,251.042c14.692,154.272,59.807,225.4,10.234,308.571,0,0,127.978-21.957,152.021-141.282,24.066-119.325-28.764-221.175-32.433-418.331" transform="translate(-1975.527 4385.352)" fill="#95999f"/>
<path id="path236" d="M3832.757-3654.165s144.494,96.743,129.8,251.042c-14.694,154.272-59.806,225.4-10.236,308.571,0,0-127.952-21.957-152.02-141.282s28.787-221.175,32.456-418.331" transform="translate(-1375.567 4385.352)" fill="#95999f"/>
</g>
</g>
</svg>
I'm trying to change the color of a given muscles.


Can you do that:
let abd = document.getElementById("Abdominals").getElementsByTagName("path")
for (let path of abd) {
path.setAttribute("fill", "red");
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1066.48291015625 731.18701171875 1521.556640625 1144.586181640625" version="1.1" >
<g id="Muscles" transform="translate(-0.146 0.364)">
<g id="Abdominals">
<path id="path196" d="M3294.281-2851.382c-15.892,20.521-35.62,44.154-48.66,64.122,0,0,31.81-113.859-15.028-518.839,0,0,65.728,78.144,94.49,251.4,0,0,10.452,150.03-30.8,203.315" transform="translate(-1825.079 4663.033)" fill="#95999f"/>
<path id="path234" d="M3671.994-2915.5c15.893,20.542,35.6,44.178,48.659,64.119,0,0-23.994-49.737,22.844-454.717,0,0-65.7,78.144-94.491,251.4,0,0-18.265,85.908,22.988,139.2" transform="translate(-1494.489 4663.033)" fill="#95999f"/>
</g>
<g id="Triceps">
<path id="path198" d="M3172.882-3654.165s-144.517,96.743-129.823,251.042c14.692,154.272,59.807,225.4,10.234,308.571,0,0,127.978-21.957,152.021-141.282,24.066-119.325-28.764-221.175-32.433-418.331" transform="translate(-1975.527 4385.352)" fill="#95999f"/>
<path id="path236" d="M3832.757-3654.165s144.494,96.743,129.8,251.042c-14.694,154.272-59.806,225.4-10.236,308.571,0,0-127.952-21.957-152.02-141.282s28.787-221.175,32.456-418.331" transform="translate(-1375.567 4385.352)" fill="#95999f"/>
</g>
</g>
</svg>
It's the easiest way e.g. to get your path elements via their IDs and then change their attributes as usual. You don't have to change attributes of all path children elements of your groups since you retrieve their entire collection etc.

Related

Retrieving a text string from a xml document

I am trying to retrieve the string "This is my string" that belongs to text id="short_name
I have tried:
$SVGTemplate = Get-Content "C:\temp\sample.svg
$SVGTemplate = [XML]$SVGTemplate
$SVGTemplateShortName = Select-Xml -Xml $SVGTemplate -XPath '/s:svg/s:g/s:g[#id="short_name"]/s:text/text()' -Namespace #{s = "http://www.w3.org/2000/svg"}
$SVGTemplateShortName.node.value
But it returns an empty value. This used to work before and recently broke because I had to redesign the svg graphic.
I have tried to correct the XPath many times and it keeps returning an empty value. What could I be doing wrong?
Below is my xml file.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E30613;}
.st1{fill:#FFFFFF;}
.st2{fill:#009FE3;}
.st3{fill:none;}
.st4{font-family:'MyriadPro-Regular';}
.st5{font-size:88px;}
.st6{fill:#008D36;}
</style>
<g id="background">
<rect id="stroke" class="st0" width="500" height="500"/>
<rect id="Fill" x="12" y="12" class="st1" width="476" height="476"/>
</g>
<g id="short">
<rect id="short_fill" x="12" y="400" class="st2" width="476" height="100"/>
<rect y="412" class="st3" width="500" height="88"/>
<text id="short_name" transform="matrix(1 0 0 1 87.7305 474.4795)" class="st1 st4 st5">This is my string</text>
</g>
<g id="hud">
<rect id="left" x="12" y="12" class="st6" width="92" height="76"/>
<rect id="right" x="396" y="12" width="92" height="76"/>
</g>
<g id="graphic">
<g id="Card_Symbl">
<g id="Layer_10">
<polygon class="st0" points="309.9,387.1 396.3,124.5 303.1,105.8 96.5,251.1 "/>
</g>
</g>
</g>
</svg>

If you want to locate an element by its full path, an easier way is to use PowerShell's member access:
$SVGTemplate.svg.g.text | Where-Object id -eq 'short_name' | ForEach-Object '#text'
... or more succinct, using intrinsic .Where method:
$SVGTemplate.svg.g.text.Where{ $_.id -eq 'short_name'}.'#text'
XPath does have an advantage if you want to locate an element regardless of how deep it is nested (relative path, introduced by double slash):
$SVGTemplate |
Select-Xml -XPath '//s:text[#id="short_name"]' -Namespace #{s = "http://www.w3.org/2000/svg"} |
ForEach-Object { $_.Node.'#text' }
Of course it also works using the absolute path (introduced using single slash), but is much more lengthy than its member access counterpart:
$SVGTemplate |
Select-Xml -XPath '/s:svg/s:g/s:text[#id="short_name"]' -Namespace #{s = "http://www.w3.org/2000/svg"} |
ForEach-Object { $_.Node.'#text' }

The original XPath expects a <g> tag with an id attribute and a value of "short_name"... however the XML does not contain such a path. Was it supposed to read `/s:text[#id="short_name"]?
Other than that, yes anyone can use PS´s "human-friendly" access methods... though there is a bit of an inherent danger there when there is no schema attached to the XML or when trying to access optional nodes that might or might not be there for a given path.
PS works with lists. XML paths break when using $xmlDoc.tagA.tagB.tagC notation; assuming this is not $null and is a list longer than exactly one (1) node then we have no way of telling where in the XML and under possibly what conditions we got those nodes from.
... When in doubt: don't.

how to remove space around SvgPicture in flutter?

Whenever I add a SvgPicture somehow there is extra space that is created between the container, I have no idea how this space is being created.
I have tried changing the width and height, changing the actual size of SVG using Inkscape and changing the fit of the SvgPicture but something fixed the issue.
IconButton(icon: SvgPicture.asset('assets/icons/drawing.svg'), onPressed: null)
Here is the image of this code:
IconButton(icon: SvgPicture.asset('assets/icons/drawing.svg', width: 15), onPressed: null)
Here is the image of this code:
The actual SVG file has no space around it and is completely filled to the canvas.
Note: There is nothing inside the column except this SVG.
SVG CODE
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 5.2916665 5.2916665"
version="1.1"
id="svg882">
<defs
id="defs876" />
<metadata
id="metadata879">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<g
id="g14"
transform="matrix(0.01414769,0,0,0.01414769,0,-0.32822657)">
<g
id="g12">
<g
id="g10">
<path
d="M 327.6,67.6 C 320.8,42 297.2,23.2 270.4,23.2 H 59.2 C 26.8,23.2 0,49.6 0,82.4 v 98 C 0,208 19.6,232 46,238 c 6.4,25.6 29.6,44.4 57.2,44.4 h 8.8 v 59.2 c 0,3.2 2,6.4 4.8,8 1.2,0.4 2.4,0.8 4,0.8 2,0 3.6,-0.8 5.2,-2 l 85.6,-66 h 102.8 c 32.4,0 59.2,-26.4 59.2,-59.2 v -98 c 0,-28 -19.6,-51.6 -46,-57.6 z M 44,125.2 v 94 C 28.4,213.2 17.6,198 17.6,180.4 v -98 c 0,-22.8 18.8,-41.6 41.6,-41.6 h 211.6 c 16.8,0 31.6,10.4 38,25.2 H 103.2 C 70.8,66 44,92.4 44,125.2 Z m 312.4,98 H 356 c 0,22.8 -18.8,41.6 -41.6,41.6 H 208.8 c -2,0 -4,0.8 -5.2,2 l -74,57.2 v -50.4 c 0,-4.8 -4,-8.8 -8.8,-8.8 H 103.2 C 80.4,264.8 61.6,246 61.6,223.2 v -98 c 0,-22.8 18.8,-41.6 41.6,-41.6 h 211.6 c 22.8,0 41.6,18.8 41.6,41.6 z"
id="path2" />
<path
d="m 298.8,122.4 h -180 c -4.8,0 -8.8,4 -8.8,8.8 0,4.8 4,8.8 8.8,8.8 h 180 c 4.8,0 8.8,-4 8.8,-8.8 0,-4.8 -4,-8.8 -8.8,-8.8 z"
id="path4" />
<path
d="m 298.8,160.8 h -180 c -4.8,0 -8.8,4 -8.8,8.8 0,4.8 4,8.8 8.8,8.8 h 180 c 4.8,0 8.8,-4 8.8,-8.8 0,-4.8 -4,-8.8 -8.8,-8.8 z"
id="path6" />
<path
d="m 298.8,199.6 h -180 c -4.8,0 -8.8,4 -8.8,8.8 0,4.8 4,8.8 8.8,8.8 h 180 c 4.8,0 8.8,-4 8.8,-8.8 0,-5.2 -4,-8.8 -8.8,-8.8 z"
id="path8" />
</g>
</g>
</g>
</g>
</svg>

Image doesn't fill its parent

I tried to load image as decoration for parent container but had the same result. I also couldn't find a way to load svg to decoration, so I stopped at Stack.
Here is my code:
class MainPageViewItem extends StatelessWidget {
final mainPageViewItem;
MainPageViewItem(this.mainPageViewItem);
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 10),
height: 150,
child: Stack(
children: <Widget>[
Column (
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
'some text',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Color(0xFFFFFFFF),
letterSpacing: 0.0015
),
),
margin: EdgeInsets.fromLTRB(40, 30, 12, 0),
),
Container(
child: Text(
'some text',
style: MyTextStyles.bodyLightTextStyle,
),
margin: EdgeInsets.fromLTRB(40, 20, 12, 15),
),
],
),
SvgPicture.asset(
'assets/vectors/wave_mask.svg',
fit: BoxFit.fill,
),
],
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: <Color> [
mainPageViewItem.startColor,
mainPageViewItem.endColor
],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
borderRadius: BorderRadius.all(Radius.circular(4.0))
),
);
}
}
And here is result:
UPDATE: xml code of "wave mask" svg:
<svg width="328" height="152" viewBox="0 0 328 152" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="16" y="12" width="296" height="120">
<rect x="16" y="12" width="296" height="120" fill="url(#paint0_linear)"/>
</mask>
<g mask="url(#mask0)">
<path style="mix-blend-mode:overlay" opacity="0.25" d="M382.842 52.5C345.722 18.362 283.573 16.5 204.531 33.472C125.488 50.4441 105.488 -10.8214 71.9514 -82C38.6146 -152.757 179.945 -77.9483 179.945 -77.9483L272.883 -96.484L382.842 52.5Z" fill="url(#paint1_linear)"/>
<g style="mix-blend-mode:overlay" opacity="0.3">
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M-157.854 115.272C-44.2231 46.1702 64.6931 171.165 149.576 173.141C271.902 176.011 297.826 54.1459 360.305 106.524C422.784 158.902 481.373 204.464 533.973 116.2C586.572 27.936 639.405 72.3972 639.405 72.3972" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.405 73.9629C638.689 74.2268 584.552 28.7079 531.802 115.603C479.052 202.498 421.786 160.141 359.228 108.477C296.548 56.8012 270.301 173.948 147.388 171.301C62.2399 169.455 -45.3477 49.4305 -157.507 118.01" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.399 75.5286C637.967 76.0456 582.48 29.447 529.611 114.985C476.743 200.522 420.795 161.353 358.144 110.431C295.263 59.4674 268.7 171.902 145.193 169.461C59.7542 167.745 -46.4728 52.6962 -157.155 120.749" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.4 77.0943C637.251 77.8861 580.415 30.1861 527.421 114.366C474.427 198.546 419.803 162.619 357.067 112.406C293.985 62.1013 267.105 169.86 143.004 167.621C57.3202 166.036 -47.5976 55.9619 -156.808 123.487" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.401 78.6657C636.535 79.6998 578.344 30.92 525.251 113.748C472.157 196.575 418.831 163.842 356.009 114.338C292.706 64.7731 265.504 167.814 140.784 165.775C54.8412 164.326 -48.7803 59.227 -156.488 126.225" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.401 80.2316C635.819 81.5458 576.279 31.6592 523.041 113.134C469.803 194.609 417.937 164.991 354.913 116.265C291.539 67.2957 263.903 165.74 138.621 163.909C52.4072 162.59 -49.8472 62.4668 -156.115 128.916" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.402 81.7974C635.104 83.3486 574.214 32.4146 520.851 112.516C467.488 192.617 416.965 166.21 353.829 118.245C290.28 69.9623 262.301 163.715 136.426 162.095C49.947 160.908 -50.9725 65.7595 -155.769 131.703" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.402 83.3631C634.381 85.205 572.143 33.132 518.661 111.897C465.179 190.662 415.987 167.427 352.752 120.225C289.04 72.5967 260.706 161.696 134.238 160.25C47.5065 159.199 -52.0972 69.0198 -155.423 134.441" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.403 84.9235C633.666 87.0293 570.078 33.8657 516.471 111.273C462.864 188.68 415.015 168.645 351.675 122.136C287.724 75.2301 259.086 159.632 132.05 158.41C45.0341 157.489 -53.2221 72.2909 -155.076 137.18" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.403 86.4949C632.95 88.8647 568.006 34.605 514.281 110.66C460.555 186.715 414.036 169.863 350.598 124.106C286.497 77.8704 257.504 157.586 129.855 156.548C42.5745 155.758 -54.3466 75.53 -154.73 139.897" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.404 88.066C632.234 90.6943 565.941 35.3334 512.084 110.046C458.226 184.759 413.045 171.086 349.514 126.059C285.232 80.5045 255.922 155.54 127.666 154.73C40.1208 154.07 -55.4719 78.8172 -154.377 142.657" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.404 89.6319C631.518 92.5241 563.876 36.078 509.894 109.428C455.911 182.778 412.118 172.305 348.437 128.013C283.966 83.1442 254.321 153.499 125.472 152.884C37.6608 152.361 -56.5969 82.0831 -154.031 145.396" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.399 91.1975C630.796 94.3536 561.805 36.817 507.716 108.82C453.628 180.823 411.12 173.538 347.373 129.977C282.708 85.789 252.72 151.463 123.296 151.055C35.2139 150.662 -57.7089 85.3596 -153.672 148.145" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.399 92.7634C630.08 96.1834 559.74 37.5508 505.514 108.191C451.287 178.83 410.129 174.745 346.277 131.92C281.43 88.4177 251.112 149.405 121.063 149.204C32.722 148.941 -58.8723 88.6087 -153.364 150.872" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.4 94.3292C629.364 98.0131 557.669 38.2899 503.323 107.572C448.978 176.854 409.144 175.969 345.199 133.879C280.171 91.0627 249.511 147.369 118.9 147.364C30.2878 147.238 -59.9716 91.8803 -152.972 153.601" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.4 95.9002C628.623 99.8316 555.604 39.0342 501.133 106.959C446.663 174.883 408.166 177.192 344.122 135.827C278.893 93.6965 247.91 145.317 116.705 145.518C27.828 145.523 -61.0964 95.1405 -152.652 156.349" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.401 97.4662C627.958 101.678 553.52 39.7626 498.943 106.34C444.367 172.918 407.181 178.41 343.071 137.781C277.647 96.3311 246.341 143.271 114.543 143.679C25.4006 143.808 -62.1955 98.4068 -152.299 159.088" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.401 99.0319C627.217 103.508 551.467 40.4964 496.753 105.721C442.038 170.946 406.196 179.633 341.961 139.75C276.35 98.9701 244.713 141.24 112.328 141.855C22.9146 142.114 -63.3466 101.688 -151.953 161.843" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.402 100.598C626.494 105.337 549.402 41.2355 494.563 105.103C439.723 168.97 405.211 180.856 340.904 141.688C275.097 101.615 243.132 139.178 110.153 139.993C20.4743 140.389 -64.4519 104.938 -151.587 164.565" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.403 102.142C625.779 107.145 547.331 41.9478 492.367 104.463C437.402 166.977 404.226 182.095 339.808 143.641C273.806 104.254 241.511 137.136 107.913 138.153C17.9503 138.679 -65.6281 108.198 -151.285 167.303" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.403 103.729C625.063 108.997 545.266 42.7084 490.176 103.871C435.086 165.033 403.242 183.307 338.724 145.594C272.528 106.894 239.897 135.089 105.751 136.313C15.5419 136.97 -66.7209 111.464 -150.907 170.042" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.397 105.301C624.347 110.826 543.201 43.4477 487.986 103.252C432.771 163.057 402.25 184.53 337.621 147.548C271.25 109.539 238.29 133.048 103.537 134.467C13.0565 135.26 -67.8714 114.735 -150.586 172.78" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.398 106.866C623.631 112.672 541.129 44.2028 485.796 102.634C430.462 161.064 401.272 185.754 336.57 149.502C269.978 112.178 236.714 131.002 101.342 132.627C10.6028 133.551 -68.9966 117.995 -150.24 175.519" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.398 108.432C622.909 114.486 539.065 44.9204 483.606 102.015C428.147 159.109 400.274 186.982 335.493 151.455C268.7 114.823 235.119 128.955 99.1792 130.771C8.18161 131.842 -70.0829 121.261 -149.868 178.274" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.425 109.998C622.219 116.316 537.019 45.6545 481.461 101.402C425.902 157.15 399.283 188.21 334.409 153.409C267.423 117.451 233.518 126.914 96.9587 128.941C5.7028 130.127 -71.2524 124.521 -149.553 180.99" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.406 111.564C621.484 118.145 534.935 46.3935 479.232 100.783C423.529 155.173 398.298 189.455 333.364 155.363C266.176 120.113 231.949 124.868 94.8279 127.113C3.28115 128.434 -72.3135 127.799 -149.143 183.746" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.387 113.135C620.749 119.975 532.87 47.1273 477.022 100.164C421.175 153.201 397.3 190.667 332.255 157.31C264.86 122.757 230.322 122.821 92.6073 125.278C0.795598 126.729 -73.4705 131.069 -148.829 186.489" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.368 114.7C620.007 121.804 530.76 47.8657 474.813 99.5453C418.866 151.225 396.27 191.895 331.146 159.263C263.549 125.401 228.689 120.773 90.3802 123.448C-1.69652 125.03 -74.6278 134.345 -148.508 189.238" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.401 116.267C619.324 123.634 528.727 48.6054 472.655 98.9272C416.583 149.249 395.311 193.124 330.094 161.217C262.297 128.046 227.152 118.733 88.2245 121.576C-4.12374 123.294 -75.72 137.585 -148.129 191.95" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.402 117.832C618.608 125.464 526.656 49.339 470.458 98.3138C414.261 147.289 394.313 194.358 329.017 163.171C261.012 130.696 225.525 116.686 86.0103 119.736C-6.59681 121.606 -76.8644 140.85 -147.802 194.688" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.396 119.398C617.892 127.294 524.565 50.078 468.268 97.6954C411.971 145.313 393.315 195.602 327.94 165.125C259.728 133.346 223.923 114.634 83.8411 117.896C-9.02426 119.876 -77.97 144.117 -147.456 197.427" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.396 120.974C617.176 129.123 522.545 50.8122 466.091 97.0767C409.637 143.341 392.292 196.819 326.857 167.078C258.443 135.996 222.322 112.598 81.6464 116.056C-11.4968 118.166 -79.0948 147.377 -147.09 200.166" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.397 122.535C616.46 130.953 520.455 51.5511 463.888 96.458C407.322 141.365 391.32 198.048 325.799 169.032C257.159 138.646 220.728 110.53 79.4581 114.21C-13.9502 116.456 -80.2196 150.643 -146.743 202.904" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.398 124.101C615.738 132.783 518.39 52.2847 461.698 95.8393C405.006 139.394 390.335 199.293 324.702 170.985C255.874 141.296 219.126 108.505 77.2698 112.37C-16.4102 114.763 -81.3444 153.908 -146.397 205.643" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.398 125.667C615.022 134.607 516.318 53.0238 459.508 95.1991C402.698 137.374 389.324 200.499 323.645 172.912C254.596 143.919 217.545 106.437 75.0817 110.503C-18.8631 113.011 -82.4628 157.158 -146.044 208.354" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.399 127.232C614.306 136.442 514.253 53.7575 457.305 94.6071C400.356 135.457 388.32 201.77 322.516 174.892C253.298 146.607 215.924 104.417 72.8864 108.685C-21.3234 111.328 -83.5942 160.413 -145.692 211.12" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.399 128.798C613.584 138.277 512.182 54.4967 455.127 93.9888C398.073 133.481 387.322 203.004 321.465 176.846C252.007 149.262 214.329 102.365 70.6918 106.845C-23.7832 109.635 -84.7257 163.705 -145.351 213.853" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.4 130.37C612.875 140.107 510.117 55.236 452.937 93.3703C395.758 131.505 386.318 204.243 320.388 178.799C250.716 151.918 212.734 100.324 68.5034 105.005C-26.2429 107.92 -85.844 166.966 -145.005 216.597" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.4 131.935C612.159 141.937 508.052 55.9699 450.722 92.7514C393.391 129.533 385.319 205.493 319.304 180.753C249.425 154.573 211.126 98.2828 66.3085 103.165C-28.6962 106.194 -86.9691 170.232 -144.659 219.335" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.401 133.501C611.437 143.766 505.98 56.7088 448.55 92.1383C391.12 127.568 384.315 206.727 318.227 182.706C248.134 157.207 209.532 96.2361 64.1201 101.319C-31.1562 104.485 -88.0941 173.498 -144.313 222.074" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.395 135.067C610.727 145.596 503.916 57.4427 446.36 91.5197C388.805 125.597 383.285 207.971 317.15 184.66C246.842 159.878 207.93 94.2002 61.8996 99.4787C-33.6481 102.775 -89.2511 176.763 -143.998 224.812" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.396 136.633C610.005 147.448 501.845 58.155 444.17 90.9013C386.496 123.648 382.306 209.216 316.073 186.614C245.558 162.55 206.329 92.1484 59.7369 97.6392C-36.0438 101.077 -90.3182 180.03 -143.62 227.562" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.396 138.193C609.289 149.245 499.78 58.9046 441.98 90.2716C384.181 121.639 381.302 210.449 314.989 188.556C244.241 165.221 204.734 90.1015 57.5487 95.7989C-38.529 99.3563 -91.4685 183.289 -143.247 230.29" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.397 139.77C608.574 151.085 497.708 59.6707 439.79 89.6638C381.872 119.657 380.298 211.704 313.931 190.521C242.969 167.892 203.133 88.055 55.3539 93.9535C-40.9888 97.647 -92.5935 186.555 -142.927 233.028" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.397 141.335C607.851 152.915 495.643 60.3936 437.619 89.0508C379.596 117.708 379.293 212.938 312.835 192.474C241.678 170.548 201.532 86.0082 53.1592 92.1133C-43.4486 95.9374 -93.7248 189.821 -142.606 235.766" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.398 142.901C607.129 154.745 493.578 61.1275 435.41 88.432C377.242 115.736 378.289 214.204 311.758 194.428C240.38 173.235 199.937 83.9672 50.9706 90.2842C-45.9023 94.2443 -94.8303 193.071 -142.228 238.516" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.398 144.467C606.42 156.574 491.507 61.8665 433.22 87.8133C374.933 113.76 377.291 215.453 310.693 196.381C239.088 175.907 198.33 81.9204 48.7823 88.4279C-48.362 92.5186 -95.9683 196.353 -141.881 241.244" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.399 146.033C605.704 158.404 489.442 62.5841 431.029 87.1946C372.617 111.805 376.28 216.703 309.597 198.334C237.797 178.556 196.735 79.8737 46.5875 86.5877C-50.8154 90.8091 -97.0934 199.629 -141.535 243.982" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.4 147.604C604.988 160.234 487.377 63.3231 428.833 86.5758C370.289 109.828 375.275 217.958 308.52 200.288C236.499 181.249 195.134 77.8323 44.3992 84.7476C-53.2751 89.0995 -98.218 202.879 -141.188 246.72" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.394 149.17C604.266 162.063 485.305 64.073 426.643 85.9625C367.98 107.852 374.271 219.213 307.411 202.241C235.208 183.921 193.539 75.7858 42.1787 82.9071C-55.767 87.3896 -99.3686 206.144 -140.874 249.458" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.387 150.735C603.542 163.893 483.233 64.8122 424.458 85.3442C365.683 105.876 373.271 220.468 306.365 204.195C233.903 186.592 191.93 73.7392 40.0084 81.0621C-58.1959 85.6806 -100.475 209.41 -140.503 252.213" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.384 152.301C602.823 165.723 481.158 65.5457 422.252 84.7252C363.345 103.905 372.244 221.739 305.271 206.148C232.608 189.247 190.325 71.6978 37.8168 79.2219C-60.659 83.971 -101.604 212.676 -140.154 254.936" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.385 153.867C602.102 167.552 479.094 66.285 420.062 84.1067C361.03 101.928 371.24 222.984 304.208 208.102C231.317 191.935 188.731 69.6513 35.6224 77.3819C-63.1184 82.2616 -102.709 215.942 -139.832 257.674" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.387 155.411C601.393 169.382 477.03 66.997 417.873 83.4608C358.716 99.9247 370.237 224.244 303.112 210.055C230.046 194.606 187.131 67.6044 33.4351 75.5362C-65.5771 80.5411 -103.858 219.207 -139.459 260.413" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.388 157.025C600.665 171.233 474.959 67.7793 415.683 82.8963C356.408 98.0132 369.233 225.526 302.036 212.031C228.73 197.31 185.556 65.5799 31.2472 73.7179C-68.0236 78.8643 -104.97 222.489 -139.106 263.173" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.389 158.57C599.957 173.058 472.895 68.4971 413.481 82.2561C354.068 96.0151 368.229 226.765 300.96 213.941C227.44 199.949 183.937 63.4954 29.0538 71.8349C-70.4887 77.1333 -106.1 225.728 -138.765 265.89" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.391 160.136C599.242 174.871 470.844 69.231 411.305 81.6376C351.766 94.0441 367.232 228.031 299.877 215.916C226.142 202.653 182.336 61.4702 26.866 70.0163C-72.9413 75.4239 -107.224 228.999 -138.418 268.628" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.392 161.701C598.527 176.706 468.76 69.9695 409.09 81.0075C349.419 92.0454 366.196 229.296 298.8 217.869C224.858 205.335 180.735 59.4232 24.6716 68.1705C-75.4005 73.6979 -108.368 232.264 -138.071 271.367" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.386 163.273C597.811 178.536 466.696 70.7037 406.919 80.4003C347.143 90.0968 365.224 230.563 297.724 219.813C223.567 208.023 179.141 57.3825 22.4518 66.3304C-77.8919 71.9991 -109.505 235.503 -137.756 274.105" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.408 164.839C597.117 180.361 464.645 71.4432 404.75 79.7875C344.855 88.1318 364.24 231.829 296.648 221.777C222.245 210.71 177.542 55.336 20.3037 64.4911C-80.3051 70.2904 -110.583 238.797 -137.363 276.871" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.389 166.404C596.375 182.195 462.529 72.176 402.541 79.1684C342.552 86.1607 363.222 233.1 295.584 223.731C221.005 213.398 175.96 53.2894 18.1217 62.6455C-82.7521 68.5809 -111.702 242.073 -137.004 279.583" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.371 167.97C595.64 184.009 460.47 72.9152 400.331 78.5494C340.192 84.1835 362.218 234.372 294.488 225.684C219.694 216.091 174.339 51.2477 15.9076 60.805C-85.231 66.8549 -112.878 245.322 -136.677 282.321" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.392 169.536C594.945 185.855 458.426 73.6602 398.162 77.9312C337.898 82.2021 361.207 235.745 293.412 227.637C218.39 218.897 172.746 49.2013 13.721 58.9651C-87.6893 65.1616 -113.969 248.588 -136.328 285.06" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.393 171.102C594.217 187.684 456.356 74.3885 395.973 77.3125C335.59 80.2366 360.216 236.984 292.304 229.591C217.08 221.552 171.113 47.1542 11.5011 57.1246C-90.1422 63.463 -115.093 251.854 -135.981 287.798" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.393 172.673C593.513 189.514 454.29 75.1275 393.801 76.6995C333.312 78.2714 359.218 238.223 291.252 231.555C215.827 224.224 169.544 45.1186 9.35061 55.2904C-92.5897 61.7536 -116.206 255.131 -135.623 290.548" stroke="white" stroke-miterlimit="10"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.5">
<path d="M639.396 174.244C592.794 191.317 452.208 75.8614 391.594 76.0809C330.98 76.3004 358.228 239.463 290.177 233.498C214.551 226.869 167.951 43.067 7.15161 53.4398C-95.092 60.0115 -117.342 258.386 -135.287 293.275" stroke="white" stroke-miterlimit="10"/>
</g>
</g>
</g>
<defs>
<linearGradient id="paint0_linear" x1="312" y1="12" x2="229.097" y2="217.83" gradientUnits="userSpaceOnUse">
<stop stop-color="#1EDAE6"/>
<stop offset="1" stop-color="#00B5C0"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="250.418" y1="8.26727" x2="176.583" y2="-34.6532" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
As you can see the "wave mask" doesn't fill entire space of container. Have any suggestions?

Wrap with this Container.
Container(
width: double.maxFinite,
height: double.maxFinite,
child: SvgPicture.asset("/path"),

Heatbar, dynamic position offset of text

I want to insert a new column in my report to graphically display a "needle" displaying the position in a range of 0% - 100% like so:
I am looking for ideas please!
My idea
Use graphic (rainbow 0%-100% in every detail column).
Use a pixel offset (somehow??) where I simply place an overly large "|" type. So if 0%-100% are 200px that would mean that to display the needle at 50% I would offset the type 100px!

The easiest / most straightforward option I have found and implemented:
<image scaleImage="RetainShape" onErrorType="Blank">
<reportElement x="575" y="1" width="100" height="13" uuid="7cf54aff-65ac-40e5-8dc9-7f95d6f34d49"/>
<imageExpression>
<![CDATA[net.sf.jasperreports.renderers.BatikRenderer.getInstanceFromText("
<svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100\" height=\"13\" viewBox=\"0 0 100 13\">
<defs>
<linearGradient id=\"linear-gradient\" x1=\"-176.88\" y1=\"316.13\" x2=\"-150.45\" y2=\"316.13\" gradientTransform=\"matrix(3.78, 0, 0, -3.78, 689.01, 1202.56)\" gradientUnits=\"userSpaceOnUse\">
<stop offset=\"0\" stop-color=\"green\"/>
<stop offset=\"1\" stop-color=\"green\" stop-opacity=\"0\"/>
</linearGradient>
</defs>
<path d=\"M0,1.26H100v10.4H0Z\" style=\"fill: url(#linear-gradient)\"/>
<path d=\"M" + !!! OFFSET CALCULATION !!! + ",0V13\" style=\"fill: none;stroke: #000\"/>
</svg>
")]]></imageExpression>
</image>
Result:

OpenStreetMap xml clarification - no image available

I am new to OSM.
I have the document https://trac.openstreetmap.org/browser/subversion/applications/rendering/osmarender6/osm-map-features-z14.xml?rev=10976
This document describe set of rules for certain zoom.
There are rules that uses an image (svg) objects, e.g:
<rule e="node" k="waterway" v="lock_gate">
<wayMarker k="waterway" class="canal-lock"/>
</rule>
And there is CSS for canal-lock in the same file:
.canal-lock {
fill: none;
stroke: #ffffff;
stroke-width: 0.1px;
stroke-opacity: 0;
marker-mid: url(#canal-lock);
}
And finally, at the bottom of the document there is:
<svg:marker fill="none" id="canal-lock" markerHeight="5.9px" markerUnits="userSpaceOnUse" markerWidth="5.9px" orient="auto" refX="1px" refY="5px" stroke="#000000" stroke-width="0.75px" stroke-opacity="1" viewBox="0 0 10 10">
<svg:path d="M 1,0 L -2,5 L 1,10"/>
</svg:marker>
My Question is, Where does the canal-lock image is obtained from. i could not find that svg on the site, and my map seems to not working well since its looking for this image.