gradient.class.js,_convertPercentUnitsToValues, non integral % values

[ekhcentrics]

Version

1.7.22 - but I believe it should affect 2.x as well

Test Case

https://jsfiddle.net/hnv5r76f/2/

Steps to reproduce

The svg in the canvas will not show the gradient;
the svg below rendered in the HTML will

Expected Behavior

fabric should render the gradients appropriately

Actual Behavior

It does not

https://github.com/kangax/fabric.js/blob/v1.7.20/src/gradient.class.js
and
https://github.com/kangax/fabric.js/blob/master/src/gradient.class.js

function _convertPercentUnitsToValues(object, options, gradientUnits)

The function tests if this prop is a % based property:

  propValue = parseFloat(options[prop], 10);
  if (typeof options[prop] === 'string' && /^\d+%$/.test(options[prop])) {
    multFactor = 0.01;
...

Does not catch partial percentages - like the y1="3.96111359%" in the linear gradient below

 <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
	<defs>
		<linearGradient x1="50%" y1="3.96111359%" x2="50%" y2="100%" id="linearGradient-1">
			<stop stop-color="#FDFDFD" offset="0%"></stop>
			<stop stop-color="#CBCBCB" offset="100%"></stop>
		</linearGradient>
		<linearGradient x1="50%" y1="3.96111359%" x2="50%" y2="100%" id="linearGradient-2">
			<stop stop-color="#B2E198" offset="0%"></stop>
			<stop stop-color="#04A171" offset="100%"></stop>
		</linearGradient>
	</defs>
	<g>
		<circle fill="url(#linearGradient-1)" cx="128" cy="128" r="127.857778"></circle>
		<circle fill="url(#linearGradient-2)" cx="127.857778" cy="128.142222" r="116.906667"></circle>
		<g transform="translate(45.511111, 52.622222)">
			<path d="M54.9418451,57.4745163 C53.5662718,59.5947652 52.2370629,61.7241163 50.9542185,63.8565963 C49.551054,59.9941252 48.3191251,56.1902496 47.2698096,52.4793874 C51.000014,51.9449163 54.9648851,51.5230852 59.1439429,51.2312452 C57.7248496,53.2655918 56.3225385,55.3468718 54.9418451,57.4745163 L54.9418451,57.4745163 L54.9418451,57.4745163 Z M158.079694,64.9494318 C153.94757,60.9828541 148.040227,57.3482229 140.521792,54.1462318 C125.596138,47.7897518 105.603676,43.6715652 84.2268229,42.5502852 C81.6489029,42.4151741 79.1321385,42.3227296 76.6981474,42.2735207 C93.0190007,22.7927741 108.781205,12.4276185 117.960796,12.0788896 C119.90469,12.0046496 121.536547,12.3892185 122.815125,13.2200807 C127.111374,16.0121874 128.303196,24.6723829 126.003747,36.3860896 C125.550058,38.6983385 127.056192,40.9408985 129.368441,41.3948718 C131.680974,41.8471385 133.922965,40.3424274 134.377223,38.0298941 C138.330147,17.8929341 132.800547,9.53282739 127.465792,6.06516517 C124.681365,4.25524517 121.372423,3.40987628 117.636814,3.55181406 C103.516707,4.08827628 83.732174,19.1442052 65.6796229,42.3551563 C58.5323874,42.6017696 51.6420051,43.2187296 45.196494,44.1812896 C44.4890807,40.8962407 43.9423785,37.7121696 43.5720318,34.6600807 C41.952974,21.3162229 43.9386807,11.8442229 48.8834629,9.3223385 C49.6779162,8.91728961 50.5460407,8.68404517 51.537614,8.60980517 C55.9558896,8.27728961 62.1900585,11.2463207 69.0801562,16.9684896 C70.8923518,18.4737696 73.5826274,18.2248807 75.0884762,16.4118318 C76.5937562,14.5990674 76.3445829,11.9090763 74.5318185,10.4037963 C65.6821829,3.05432072 57.7313918,-0.413057055 50.8990362,0.100365167 C48.7864674,0.258800722 46.804174,0.804080722 45.0067696,1.72056072 C40.4135607,4.06296072 37.2747162,8.54836517 35.6772762,15.0521874 C34.3090985,20.6216096 34.1151074,27.5646141 35.1009918,35.6877785 C35.4906807,38.9002941 36.0607074,42.2436541 36.7954274,45.6860007 C31.7559251,46.7481163 27.0853474,48.0420541 22.898894,49.5544452 C4.58294736,56.1709074 0.354396245,64.8919741 0.0324051334,71.0430852 C-0.275363755,76.9188541 2.7323518,85.6635296 18.808014,93.9536629 C20.9023785,95.0339829 23.4757474,94.2110852 24.5557829,92.1170052 C25.6358185,90.0226407 24.8134896,87.4492718 22.7191251,86.3695207 C13.4715518,81.6002407 8.30860069,76.1770229 8.55407624,71.4893785 C8.89996069,64.8845785 19.9705385,57.8940718 38.8280674,53.9550852 C40.5748407,60.2637785 42.8185385,66.8159563 45.508814,73.4597252 C38.7310718,86.1826407 33.7857207,98.7218052 31.221454,109.875725 C29.3887785,117.845859 28.8531696,124.765539 29.6294185,130.442765 C30.5359429,137.07345 33.1881029,141.860365 37.511374,144.670676 C39.7158185,146.103423 42.6868407,147.224134 46.5894185,147.224134 C52.2481562,147.22385 59.8644407,144.866659 69.9329207,137.68529 C71.851214,136.317112 72.2975074,133.652721 70.9290451,131.734143 C69.5611518,129.81585 66.8964762,129.369841 64.9778985,130.738019 C55.0530629,137.816987 46.5237118,140.350819 42.1617562,137.516045 C37.5099518,134.492401 36.5289029,124.874196 39.5377562,111.787476 C41.5328496,103.10993 45.0929562,93.4914407 49.9208318,83.5782674 C50.9690096,85.8222496 52.0629829,88.0676541 53.2038896,90.3087918 C62.9207962,109.396152 74.8159785,126.002872 86.6983607,137.070321 C92.6822185,142.643441 98.4055251,146.567636 103.709276,148.733965 C106.926912,150.047814 109.948565,150.704881 112.753756,150.704881 C115.350165,150.704596 117.76197,150.141681 119.970112,149.015565 C124.400334,146.756223 127.481152,142.494676 129.127232,136.349539 C130.536654,131.087032 130.853241,124.522339 130.068743,116.837503 C128.525916,101.72753 122.816263,83.2989429 113.991658,64.9463029 C112.970787,62.8223563 110.421027,61.9292007 108.297365,62.9497874 C106.173703,63.9709429 105.279978,66.5204185 106.301134,68.6440807 C114.708458,86.1288807 120.134805,103.552241 121.579498,117.704205 C122.850112,130.150356 120.799267,139.013645 116.093418,141.413503 C111.151765,143.933396 102.337685,139.975352 92.5143962,130.825912 C81.3439785,120.421787 70.0839607,104.657592 60.8082274,86.4375029 C58.687694,82.2718141 56.7341296,78.0975918 54.9566362,73.9546585 C57.1627874,70.0099829 59.5484229,66.0519385 62.100174,62.1192096 C64.7019874,58.1093963 67.3359429,54.3305518 69.9770096,50.7858052 C70.6775962,50.7761341 71.3818807,50.7690229 72.0921385,50.7667474 C75.7563518,50.7550852 79.6836762,50.8572007 83.7799607,51.0719563 C104.184298,52.1423207 123.14821,56.0224274 137.178432,61.9971829 C149.519054,67.2528629 156.713223,73.7012185 156.42309,79.2467474 C156.176476,83.9551563 150.455445,88.8220007 140.727161,92.5991385 C138.530396,93.4521874 137.440974,95.9242941 138.293738,98.1207741 C138.949667,99.8100896 140.563036,100.84433 142.272547,100.84433 C142.785685,100.84433 143.30821,100.751032 143.815374,100.553912 C160.719907,93.9903563 164.636138,85.5870141 164.944761,79.6927563 C165.214414,74.5414674 162.904725,69.5813252 158.079694,64.9494318 L158.079694,64.9494318 L158.079694,64.9494318 Z" fill="#F2F8F6"></path>
			<path d="M73.6829762,76.5104793 C73.6829762,81.6637593 77.856914,85.8413948 83.0056428,85.8413948 C88.1546562,85.8413948 92.328594,81.6637593 92.328594,76.5104793 C92.328594,71.3571993 88.1546562,67.1795637 83.0056428,67.1795637 C77.856914,67.1795637 73.6829762,71.3571993 73.6829762,76.5104793" fill="#F1F8F3"></path>
		</g>
	</g>
</svg>

Need an updated test to catch non-integral % values

Perhaps
if (typeof options[prop] === 'string' && /^(\d+.\d+)%|(\d+)%$/.test(options[prop])) {

Or perhaps simply see if it ends with a '%'