I have a problem to solve. I want to draw a circle svg with gradient fonts based on a score. The score varies from 0 to 100. If the score is 60% for example, I have to draw 60% of the circle knowing that the gradient changes every 20%. I would like to do something like the following image but with gradients:
I saw the example below which could be useful to me, but I don't understand how the coordinates of the M in path are calculated:
<svg width="300" height="300">
<linearGradient id="linearColors1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#01E400"></stop>
<stop offset="100%" stop-color="#FEFF01"></stop>
</linearGradient>
<linearGradient id="linearColors2" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#FEFF01"></stop>
<stop offset="100%" stop-color="#FF7E00"></stop>
</linearGradient>
<linearGradient id="linearColors3" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF7E00"></stop>
<stop offset="100%" stop-color="#FB0300"></stop>
</linearGradient>
<linearGradient id="linearColors4" x1="1" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#FB0300"></stop>
<stop offset="100%" stop-color="#9B004A"></stop>
</linearGradient>
<linearGradient id="linearColors5" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-color="#9B004A"></stop>
<stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
<linearGradient id="linearColors6" x1="0" y1="1" x2="1" y2="0">
<stop offset="0%" stop-color="#7D0022"></stop>
<stop offset="100%" stop-color="#01E400"></stop>
</linearGradient>
<path d="M150 10 a120 120 0 0 1 103.9230 60"
fill="none" stroke="url(#linearColors1)" stroke-width="5" />
<path d="M253.9230 70 a120 120 0 0 1 0 120"
fill="none" stroke="url(#linearColors2)" stroke-width="5" />
<path d="M253.9230 190 a120 120 0 0 1 -103.9230 60"
fill="none" stroke="url(#linearColors3)" stroke-width="5" />
<path d="M150 250 a120 120 0 0 1 -103.9230 -60"
fill="none" stroke="url(#linearColors4)" stroke-width="5" />
<path d="M46.077 190 a120 120 0 0 1 0 -120"
fill="none" stroke="url(#linearColors5)" stroke-width="5" />
<path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
fill="none" stroke="url(#linearColors6)" stroke-width="5" />
</svg>
Can you help me solve this problem or explain to me the calculation logic of the M in the example above?
Thanks very much !
Instead of using the path element I use a circle and the stroke-dasharray attribute. I create a circle "slice" (1/5 if a circle) and then use <use> for reusing the slice. The value is controlled by a mask (and the stroke-dasharray of a circle).
Each gradient is used on the different use elements. You can see that they are all the same. Basically it fits the initial circle slice. After being applied each circle slice is rotated.
Here is an example of the circle element with the stroke-dasharray and the gradient. I added the gradient to the fill so that you can see what it looks like:
<svg width="250" viewBox="0 0 100 100">
<defs>
<linearGradient id="lg1" gradientTransform="rotate(36) translate(.2 0)">
<stop offset="25%" stop-color="DodgerBlue"/>
<stop offset="75%" stop-color="Green"/>
</linearGradient>
</defs>
<g transform="translate(50 50)">
<circle id="c1" r="45" stroke-width="10" fill="url(#lg1)"
stroke="url(#lg1)" stroke-dasharray="0 74 21 20" pathLength="100" />
</g>
</svg>
And this is the end result:
document.forms.form01.range.addEventListener('change', e => {
document.getElementById('c2').setAttribute('stroke-dasharray', `${e.target.value} 200`);
document.getElementById('t1').textContent = `${e.target.value}%`;
});
<form name="form01">
<input type="range" name="range" min="0" max="100" value="71"/>
</form>
<svg width="250" viewBox="0 0 100 100">
<defs>
<linearGradient id="temp1" gradientTransform="rotate(36) translate(.2 0)"/>
<linearGradient id="lg1" href="#temp1">
<stop offset="25%" stop-color="DodgerBlue"/>
<stop offset="75%" stop-color="Green"/>
</linearGradient>
<linearGradient id="lg2" href="#temp1">
<stop offset="25%" stop-color="Green"/>
<stop offset="75%" stop-color="Yellow"/>
</linearGradient>
<linearGradient id="lg3" href="#temp1">
<stop offset="25%" stop-color="Yellow"/>
<stop offset="75%" stop-color="Orange"/>
</linearGradient>
<linearGradient id="lg4" href="#temp1">
<stop offset="25%" stop-color="Orange"/>
<stop offset="75%" stop-color="DarkOrchid"/>
</linearGradient>
<linearGradient id="lg5" href="#temp1">
<stop offset="25%" stop-color="DarkOrchid"/>
<stop offset="75%" stop-color="Red"/>
</linearGradient>
<circle id="c1" r="45" stroke-width="10" fill="none"
stroke-dasharray="0 74 21 20" pathLength="100" />
<mask id="m1">
<circle id="c2" r="45" stroke-width="10" fill="none" stroke="white"
stroke-dasharray="71 100" pathLength="104" transform="rotate(-83)"
stroke-linecap="round" />
</mask>
</defs>
<g transform="translate(50 50)" mask="url(#m1)">
<use href="#c1" stroke="url(#lg1)"/>
<use href="#c1" stroke="url(#lg2)" transform="rotate(72)"/>
<use href="#c1" stroke="url(#lg3)" transform="rotate(144)"/>
<use href="#c1" stroke="url(#lg4)" transform="rotate(216)"/>
<use href="#c1" stroke="url(#lg5)" transform="rotate(288)"/>
</g>
<text id="t1" x="50" y="50" font-family="sans-serif" text-anchor="middle"
dominant-baseline="middle">71%</text>
</svg>
Svgs are quite tricky to just code.
I could not make your circle thicker even in Adobe Illustrator as it breaks the gradient. And the reason for it is that SVG does only support gradient inside a stroke, not along or across.
This also a reason why your annulus (circle) is broken into 6 separate sectors.
So, keep in mind that it will be very hard to come up with general solution because you are using gradient. Every design would need custom implementation
My solution:
I copied and connected all the 6 paths of the circle from your example into one circle. Then broke down it into 100 pieces which would represent the percents and colored it grey.
Then I just put it on top of the gradient circle.
Here is the code for the SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg width="300" height="300" 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 277.7952881 277.7952881" enable-background="new 0 0 277.7952881 277.7952881" xml:space="preserve">
<g id="Layer_2">
<g id="gradient">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-156.1584625" y1="555.276123" x2="-155.1584625" y2="554.276123" gradientTransform="matrix(103.9230042 0 0 -60 16385.0898438 33325.2265625)">
<stop offset="0" style="stop-color:#5CB130"/>
<stop offset="1" style="stop-color:#F2E500"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_1_)" stroke-width="5" d="M138.8976288,18.8976383
c42.8718567,0.0000153,82.4870758,22.8718815,103.9230042,60"/>
<linearGradient id="SVGID_00000066511025684526834950000005985987899688685485_" gradientUnits="userSpaceOnUse" x1="-147.1517181" y1="557.5291138" x2="-147.1517181" y2="556.5291138" gradientTransform="matrix(16.0769653 0 0 -120 2632.1657715 66982.390625)">
<stop offset="0" style="stop-color:#F2E500"/>
<stop offset="1" style="stop-color:#EF7D1A"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_00000066511025684526834950000005985987899688685485_)" stroke-width="5" d="
M242.8206329,78.8976364c21.4359589,37.1281281,21.4359589,82.8718796,0,120.0000076"/>
<linearGradient id="SVGID_00000061460617045725905590000012120539635448511164_" gradientUnits="userSpaceOnUse" x1="-155.1584625" y1="554.9348145" x2="-156.1584625" y2="553.9348145" gradientTransform="matrix(103.9230042 0 0 -60 16385.0898438 33505.2265625)">
<stop offset="0" style="stop-color:#EF7D1A"/>
<stop offset="1" style="stop-color:#E5251E"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_00000061460617045725905590000012120539635448511164_)" stroke-width="5" d="
M242.8206329,198.897644c-21.4359283,37.1281128-61.0511475,59.9999695-103.9230042,60"/>
<linearGradient id="SVGID_00000087406250813457147340000016349020068421769389_" gradientUnits="userSpaceOnUse" x1="-155.4997864" y1="553.9348145" x2="-156.4997864" y2="554.9348145" gradientTransform="matrix(103.9229965 0 0 -60 16281.1660156 33505.2265625)">
<stop offset="0" style="stop-color:#E5251E"/>
<stop offset="1" style="stop-color:#9B134D"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_00000087406250813457147340000016349020068421769389_)" stroke-width="5" d="
M138.8976288,258.897644c-42.8718491-0.0000305-82.4870605-22.8718872-103.9229889-60"/>
<linearGradient id="SVGID_00000139976144062006628720000013983753953570931840_" gradientUnits="userSpaceOnUse" x1="-149.0865936" y1="556.5291138" x2="-149.0865936" y2="557.5291138" gradientTransform="matrix(16.076952 0 0 -120 2408.2407227 66982.390625)">
<stop offset="0" style="stop-color:#9B134D"/>
<stop offset="1" style="stop-color:#7D1526"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_00000139976144062006628720000013983753953570931840_)" stroke-width="5" d="
M34.9746323,198.897644c-21.435936-37.1281281-21.435936-82.8718796,0-120.0000076"/>
<linearGradient id="SVGID_00000165210933497967896270000001121849787090825106_" gradientUnits="userSpaceOnUse" x1="-156.4997864" y1="554.276123" x2="-155.4997864" y2="555.276123" gradientTransform="matrix(103.9230042 0 0 -60 16281.1669922 33325.2265625)">
<stop offset="0" style="stop-color:#7D1526"/>
<stop offset="1" style="stop-color:#5CB130"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_00000165210933497967896270000001121849787090825106_)" stroke-width="5" d="
M34.9746323,78.8976364c21.4359245-37.1281128,61.0511475-59.9999809,103.9229965-60"/>
</g>
</g>
<g id="Layer_1">
<g id="percentage">
<path id="percent_00000032606264135215483020000005541880329144611487_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M138.8975983,18.9037132c2.5035095,0.0003986,5.015625,0.0722179,7.5348663,0.2307148"/>
<path id="percent_00000028306369609926755810000017306730045105677219_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M146.4320831,19.1404915c2.4985504,0.1575947,5.0011902,0.3870087,7.5055084,0.7033787"/>
<path id="percent_00000082361906806784941970000002028381295781626284_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M153.9368286,19.8498974c2.4837189,0.3141689,4.9670105,0.7002716,7.4465332,1.1732655"/>
<path id="percent_00000138539961731828049390000013280001327052129686_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M161.3822174,21.029129c2.4590912,0.4695034,4.9132538,1.0107708,7.3581848,1.6385212"/>
<path id="percent_00000065036175195749828250000017498148216197095590_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M168.7388763,22.6735344c2.4247589,0.6229839,4.8400879,1.3172817,7.2407684,2.0973129"/>
<path id="percent_00000119116810928129124040000012881680177546199181_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M175.9777679,24.7766247c2.3808594,0.7740059,4.747818,1.6185913,7.0947876,2.547823"/>
<path id="percent_00000074422924677370162630000007097224799103991992_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M183.0703125,27.3300953c2.3275604,0.9219761,4.6368256,1.9135189,6.9208069,2.9882832"/>
<path id="percent_00000178883418153782545710000000098690301336231076_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M189.9885406,30.3238754c2.2650757,1.0663033,4.5075073,2.2008896,6.7195129,3.4169464"/>
<path id="percent_00000086682612977677562320000017203198116736105388_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M196.7051239,33.7461433c2.1936493,1.2064247,4.3604279,2.4795761,6.4916992,3.8321266"/>
<path id="percent_00000052070989569751716190000012502694854833929856_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M203.193573,37.5833969c2.1135712,1.3417854,4.1961212,2.7484779,6.238266,4.2321854"/>
<path id="percent_00000060006693123788471530000004814622102259509684_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M209.4282684,41.8204956c2.0251465,1.4718475,4.015274,3.0065269,5.9602203,4.6155319"/>
<path id="percent_00000035506236246205691270000010670775571977134516_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M215.384613,46.4407082c1.9287415,1.5961037,3.818573,3.2527199,5.6586609,4.9806747"/>
<path id="percent_00000021834723034317312760000002303020510782178470_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M221.0391083,51.425808c1.824707,1.7140617,3.6067963,3.4860687,5.3347473,5.3261566"/>
<path id="percent_00000006709561094081735420000002392057266482324352_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M226.3694153,56.7561188c1.7134857,1.8252525,3.3807831,3.7056618,4.9897919,5.6506157"/>
<path id="percent_00000168106616366021304380000007440336931191248563_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M231.3545227,62.4106064c1.5954895,1.929245,3.1414337,3.9106293,4.6251373,5.952774"/>
<path id="percent_00000154403508051192442000000000638716018432371082_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M235.9747467,68.366951c1.4712067,2.0256195,2.889679,4.1001663,4.2422333,6.2314453"/>
<path id="percent_00000147179810747847188290000001428271484682055339_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M240.2118378,74.6016464c1.3411102,2.1139984,2.6265259,4.2735214,3.8425903,6.485527"/>
<path id="percent_00000131327499497543205100000014632942614648512180_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M244.0491028,81.0900955c1.205719,2.1940308,2.3529968,4.4300079,3.4277649,6.7139969"/>
<path id="percent_00000172432103422618070720000011453093990830625721_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M247.4713745,87.8066788c1.0655823,2.2654114,2.0702057,4.5690155,2.9994354,6.9159851"/>
<path id="percent_00000135677098630294360220000003873538208549038266_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M250.4651489,94.7248993c0.9212341,2.3278503,1.7792358,4.6899872,2.5592651,7.0906677"/>
<path id="percent_00000158020922039739367080000004200218855343618215_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M253.018631,101.8174438c0.7732544,2.3811035,1.4812317,4.79245,2.1089783,7.237381"/>
<path id="percent_00000026122967701204520070000015876310050288714924_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M255.1217194,109.0563278c0.6222229,2.4249573,1.1773834,4.8759995,1.6503754,7.3555222"/>
<path id="percent_00000152962838819067721290000009347820478988735362_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M256.7661438,116.4129868c0.4687195,2.4592361,0.8688965,4.9403076,1.1852417,7.4446335"/>
<path id="percent_00000016058514067193110380000006409792379723118509_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M257.9453735,123.8583755c0.313385,2.4838181,0.5569763,4.9851151,0.7154846,7.5043716"/>
<path id="percent_00000140000107912993020050000017191904555679128495_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M258.6547852,131.3631287c0.1567993,2.4985962,0.2428589,5.0102539,0.2428589,7.5344849"/>
<path id="percent_00000134230670064259057810000014412453315966410635_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M258.891571,138.8975983c-0.0003967,2.5035095-0.0722351,5.015625-0.2307129,7.5348663"/>
<path id="percent_00000039847019014144571950000016927207652635820934_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M258.6547852,146.4320831c-0.1575928,2.4985504-0.3870239,5.0011902-0.7033691,7.5055084"/>
<path id="percent_00000111177965635098942620000007839177954551259531_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M257.9453735,153.9368286c-0.3141785,2.4837189-0.7002563,4.9670105-1.1732483,7.4465332"/>
<path id="percent_00000158743007099903390380000014738849805299663024_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M256.7661438,161.3822174c-0.4695129,2.4590912-1.0107727,4.9132538-1.6385193,7.3581848"/>
<path id="percent_00000028309406856002023020000006322882414327936641_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M255.1217346,168.7388763c-0.6229706,2.4247589-1.317276,4.8400879-2.0973053,7.2407684"/>
<path id="percent_00000003821784454078841200000017734589216049303965_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M253.0186462,175.9777679c-0.7740021,2.3808594-1.6185913,4.747818-2.547821,7.0947876"/>
<path id="percent_00000030459373252026938060000003091514103304890552_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M250.4651794,183.0703125c-0.9219818,2.3275604-1.9135132,4.6368256-2.9882812,6.9208069"/>
<path id="percent_00000137097836164980653750000007511925382980972474_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M247.471405,189.9885406c-1.0663147,2.2650757-2.2008972,4.5075073-3.4169464,6.7195129"/>
<path id="percent_00000120549228966608569990000015797767285371552671_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M244.0491333,196.7051239c-1.2064209,2.1936493-2.4795837,4.3604279-3.8321228,6.4916992"/>
<path id="percent_00000124148718096123232570000014324110734300873868_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M240.2118835,203.193573c-1.3417969,2.1135712-2.7484894,4.1961212-4.232193,6.238266"/>
<path id="percent_00000170263932946661298140000016757709090411024010_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M235.9747772,209.4282684c-1.4718475,2.0251465-3.0065308,4.015274-4.6155243,5.9602203"/>
<path id="percent_00000076561799036968615190000011673503828065269145_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M231.3545685,215.384613c-1.5960999,1.9287415-3.2527161,3.818573-4.9806671,5.6586609"/>
<path id="percent_00000083788385693069256220000017438794050104042130_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M226.3694611,221.0391083c-1.7140503,1.824707-3.4860687,3.6067963-5.3261414,5.3347473"/>
<path id="percent_00000058568819026925842230000011573971903342706051_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M221.0391541,226.3694153c-1.8252563,1.7134857-3.705658,3.3807831-5.6506195,4.9897919"/>
<path id="percent_00000170248015312475403250000009327155199174933140_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M215.3846741,231.3545227c-1.929245,1.5954895-3.9106293,3.1414337-5.952774,4.6251373"/>
<path id="percent_00000118391314128817817130000001054673944705474946_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M209.4283295,235.9747467c-2.0256195,1.4712067-4.100174,2.889679-6.2314453,4.2422333"/>
<path id="percent_00000030481540633374888260000006401156712534483352_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M203.193634,240.2118378c-2.1139984,1.3411102-4.2735291,2.6265259-6.4855347,3.8425903"/>
<path id="percent_00000147205492172703277950000000310650880793352115_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M196.7051849,244.0491028c-2.194046,1.205719-4.4300079,2.3529968-6.7140045,3.4277649"/>
<path id="percent_00000093880020027073771160000003256237277600216455_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M189.9886017,247.4713745c-2.2654114,1.0655823-4.5690155,2.0702057-6.9159851,2.9994354"/>
<path id="percent_00000075147182715102416800000012797925539604231085_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M183.0703735,250.4651489c-2.3278503,0.9212341-4.6899872,1.7792358-7.0906677,2.5592651"/>
<path id="percent_00000083797828779468483540000014297191505650432948_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M175.977829,253.018631c-2.3811035,0.7732544-4.79245,1.4812317-7.237381,2.1089783"/>
<path id="percent_00000154400065520716691750000012560135372897606272_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M168.7389526,255.1217194c-2.4249573,0.6222229-4.8760071,1.1773834-7.3555298,1.6503754"/>
<path id="percent_00000049922155415035982430000009480219739568052911_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M161.3822937,256.7661438c-2.4592438,0.4687195-4.9403076,0.8688965-7.4446411,1.1852417"/>
<path id="percent_00000162320235452610224130000005560025261011403174_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M153.9369049,257.9453735c-2.4838257,0.313385-4.9851227,0.5569763-7.5043793,0.7154846"/>
<path id="percent_00000091005145132581292730000010488787202275794842_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M146.4321594,258.6547852c-2.4985962,0.1567993-5.0102539,0.2428589-7.5344849,0.2428589"/>
<path id="percent_00000103257077072244403140000003000387872561340295_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M138.8976746,258.891571c-2.5035095-0.0003967-5.015625-0.0722351-7.5348663-0.2307129"/>
<path id="percent_00000111158083606585183660000007892379069054209716_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M131.3631897,258.6547852c-2.4985504-0.1575928-5.0011826-0.3870239-7.5055084-0.7033691"/>
<path id="percent_00000023242655163615003150000001829109110270087815_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M123.8584442,257.9453735c-2.4837189-0.3141785-4.9670181-0.7002563-7.4465332-1.1732483"/>
<path id="percent_00000022518474140820104510000003271974032260690093_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M116.4130554,256.7661438c-2.4590988-0.4695129-4.9132462-1.0107727-7.3581772-1.6385193"/>
<path id="percent_00000093877533468282143940000005000384021352938391_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M109.0563965,255.1217346c-2.4247589-0.6229706-4.8400803-1.317276-7.2407684-2.0973053"/>
<path id="percent_00000176745329974692471870000016560602430003898287_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M101.8175125,253.0186462c-2.3808594-0.7740021-4.7478256-1.6185913-7.0947952-2.547821"/>
<path id="percent_00000048478376000292398490000002361039895884042116_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M94.7249603,250.4651794c-2.3275604-0.9219818-4.6368179-1.9135132-6.9208069-2.9882812"/>
<path id="percent_00000063611903572415768630000017217627879398935937_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M87.8067398,247.471405c-2.2650757-1.0663147-4.507515-2.2008972-6.7195129-3.4169464"/>
<path id="percent_00000169540952752603874400000017713679558481356965_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M81.0901566,244.0491333c-2.1936569-1.2064209-4.3604279-2.4795837-6.4917068-3.8321228"/>
<path id="percent_00000103252877608182980650000012266219846621553568_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M74.6017075,240.2118835c-2.1135712-1.3417969-4.1961288-2.7484894-6.2382736-4.232193"/>
<path id="percent_00000018229762937518236790000010214476917681663419_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M68.3670044,235.9747772c-2.0251465-1.4718475-4.0152664-3.0065308-5.9602203-4.6155243"/>
<path id="percent_00000049198495772670228700000015892206198793261730_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M62.4106598,231.3545685c-1.9287376-1.5960999-3.8185692-3.2527161-5.6586533-4.9806671"/>
<path id="percent_00000163061696861974236580000012231850179018578051_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M56.7561684,226.3694611c-1.824707-1.7140503-3.6067886-3.4860687-5.3347435-5.3261414"/>
<path id="percent_00000103971948649784591570000016617486256704553645_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M51.4258537,221.0391541c-1.7134781-1.8252563-3.3807793-3.705658-4.9897842-5.6506195"/>
<path id="percent_00000018235409277527290320000007366834638086925983_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M46.4407539,215.3846741c-1.5954933-1.929245-3.1414299-3.9106293-4.6251373-5.952774"/>
<path id="percent_00000094617257770944187940000011362927962401918120_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M41.8205338,209.4283295c-1.4712029-2.0256195-2.889679-4.100174-4.2422295-6.2314453"/>
<path id="percent_00000164515347713346567520000006243065964209341855_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M37.5834351,203.193634c-1.3411102-2.1139984-2.6265259-4.2735291-3.8425827-6.4855347"/>
<path id="percent_00000059999884343081136830000001429886033743376783_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M33.7461777,196.7051849c-1.2057266-2.194046-2.3530083-4.4300079-3.4277725-6.7140045"/>
<path id="percent_00000096755803173383212970000009641632149746558385_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M30.323904,189.9886017c-1.0655823-2.2654114-2.0702019-4.5690155-2.9994335-6.9159851"/>
<path id="percent_00000124854919331479801570000008131814051369634944_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M27.330122,183.0703735c-0.9212341-2.3278503-1.7792263-4.6899872-2.5592575-7.0906677"/>
<path id="percent_00000138541041412509839910000015910376640192217490_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M24.7766457,175.977829c-0.7732487-2.3811035-1.4812298-4.79245-2.1089802-7.237381"/>
<path id="percent_00000098903297908647029640000018031008645145274505_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M22.6735516,168.7389526c-0.6222115-2.4249573-1.1773853-4.8760071-1.6503773-7.3555298"/>
<path id="percent_00000183963300764045405510000011092879603375097021_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M21.0291424,161.3822937c-0.4687195-2.4592438-0.8688946-4.9403076-1.1852646-7.4446411"/>
<path id="percent_00000093885803657794915140000009980523458620072098_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M19.8499069,153.9369049c-0.3133793-2.4838257-0.5569763-4.9851227-0.7154751-7.5043793"/>
<path id="percent_00000117652736697560549580000011023614209648241292_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M19.1404972,146.4321594c-0.1567993-2.4985962-0.2428589-5.0102539-0.2428589-7.5344849"/>
<path id="percent_00000181770529799759843720000003459230667421039798_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M18.9037132,138.8976746c0.0003986-2.5035095,0.0722179-5.015625,0.2307148-7.5348663"/>
<path id="percent_00000105391457419526061150000017621335826939528592_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M19.1404915,131.3631897c0.1575947-2.4985504,0.3870087-5.0011826,0.7033787-7.5055084"/>
<path id="percent_00000070834920069069246510000014593432956475295678_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M19.8498974,123.8584442c0.3141689-2.4837189,0.7002716-4.9670105,1.1732655-7.4465332"/>
<path id="percent_00000145780121849657739760000002789697054560922549_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M21.029129,116.4130554c0.4695034-2.4590988,1.0107708-4.9132462,1.6385212-7.3581772"/>
<path id="percent_00000064350827270053089010000008395732268159986063_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M22.6735344,109.0563965c0.6229839-2.4247589,1.3172817-4.8400803,2.0973129-7.2407684"/>
<path id="percent_00000156570514578808900040000011510914257191242909_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M24.7766247,101.8175125c0.7740059-2.3808594,1.6185913-4.7478256,2.547823-7.0947952"/>
<path id="percent_00000111895702114263549760000016354777988337565339_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M27.3300953,94.7249603c0.9219742-2.3275604,1.913517-4.6368179,2.9882832-6.9208069"/>
<path id="percent_00000091693992784113435900000002782527186721650343_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M30.3238754,87.8067398c1.0663033-2.2650757,2.2008896-4.507515,3.4169464-6.7195129"/>
<path id="percent_00000127027784293992435210000010206990156284212921_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M33.7461433,81.0901566c1.2064247-2.1936569,2.4795761-4.3604279,3.8321266-6.4917068"/>
<path id="percent_00000029752578365103483660000000720109475777914262_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M37.5833969,74.6017075c1.3417854-2.1135712,2.7484779-4.1961288,4.2321854-6.2382736"/>
<path id="percent_00000133527447926399569810000011232003768216319417_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M41.8204956,68.3670044c1.4718475-2.0251465,3.0065269-4.0152664,4.6155319-5.9602203"/>
<path id="percent_00000165925257800574240700000016152351988347906738_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M46.4407082,62.4106598c1.5961037-1.9287376,3.2527199-3.8185692,4.9806747-5.6586533"/>
<path id="percent_00000149348233867586492550000003341265119176423314_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M51.425808,56.7561684c1.7140617-1.824707,3.4860687-3.6067886,5.3261566-5.3347435"/>
<path id="percent_00000026142351716086889880000006482746373313516417_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M56.7561188,51.4258537c1.8252525-1.7134781,3.7056618-3.3807793,5.6506157-4.9897842"/>
<path id="percent_00000013902945361986194870000000093217682497202107_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M62.4106064,46.4407539c1.929245-1.5954933,3.9106293-3.1414299,5.952774-4.6251373"/>
<path id="percent_00000106128325588063384870000008938161577721158079_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M68.366951,41.8205338c2.0256195-1.4712029,4.1001663-2.889679,6.2314453-4.2422295"/>
<path id="percent_00000018205018634590916450000001348648361061842613_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M74.6016464,37.5834351c2.1139984-1.3411102,4.2735214-2.6265259,6.485527-3.8425827"/>
<path id="percent_00000147937565868708783540000003214215170601951145_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M81.0900955,33.7461777c2.1940308-1.2057266,4.4300079-2.3530083,6.7139969-3.4277725"/>
<path id="percent_00000012458452623860852590000015295768040977373079_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M87.8066788,30.323904c2.2654114-1.0655823,4.5690155-2.0702019,6.9159851-2.9994335"/>
<path id="percent_00000057832004969570609980000012330358831092775855_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M94.7248993,27.330122c2.3278503-0.9212341,4.6899872-1.7792263,7.0906677-2.5592575"/>
<path id="percent_00000078006224767329465430000007054961664540901035_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M101.8174438,24.7766457c2.3811035-0.7732487,4.79245-1.4812298,7.237381-2.1089802"/>
<path id="percent_00000047057945113382245830000007134537769256595896_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M109.0563278,22.6735516c2.4249573-0.6222115,4.8759995-1.1773853,7.3555222-1.6503773"/>
<path id="percent_00000134941977547941051570000011425067305948609678_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M116.4129868,21.0291424c2.4592361-0.4687195,4.9403076-0.8688946,7.4446335-1.1852646"/>
<path id="percent_00000159467815995511282350000007405889823836648332_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M123.8583755,19.8499069c2.4838181-0.3133793,4.9851151-0.5569763,7.5043716-0.7154751"/>
<path id="percent_00000023984292376357922240000008516262335734862210_" fill="none" stroke="#D9D8D8" stroke-width="5" stroke-miterlimit="10" d="
M131.3631287,19.1404972c2.4985962-0.1567993,5.0102539-0.2428589,7.5344849-0.2428589"/>
</g>
</g>
</svg>
And this is how you show the percentage with Javascript:
const percents = document.querySelectorAll('#percentage path');
const winnerResult = 71;
for (const percent in percents) {
if (percent < winnerResult) {
percents[percent].style.display = 'none';
}
}
I have a number of svg files of different components. Each of these components may or may not contain "port"'s which I want to ignore when determining the size of the svg. For example here are 2 different kinds of svg's that I have:
<svg width="263" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="component">
<polygon points="41.5,201.5 241.5,201.5 241.5,1.5 41.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="41.5,41.5 67.5,77.5 97.5,77.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="41.5,161.5 67.5,129.5 99.5,129.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polygon points="191.5,101.5 191.3,97.2 190.8,92.9 189.8,88.7 188.6,84.6 186.9,80.6 185.0,76.8 182.7,73.2 180.1,69.7 177.2,66.5 174.1,63.6 170.7,60.9 167.1,58.6 163.3,56.5 159.4,54.8 155.3,53.4 151.1,52.4 146.9,51.8 142.6,51.5 138.3,51.6 134.0,52.1 129.8,52.9 125.6,54.1 121.6,55.6 117.8,57.5 114.1,59.7 110.6,62.2 107.3,65.0 104.3,68.1 101.6,71.4 99.1,75.0 97.0,78.7 95.2,82.6 93.8,86.7 92.7,90.8 91.9,95.1 91.5,99.3 91.5,103.7 91.9,107.9 92.7,112.2 93.8,116.3 95.2,120.4 97.0,124.3 99.1,128.0 101.6,131.6 104.3,134.9 107.3,138.0 110.6,140.8 114.1,143.3 117.8,145.5 121.6,147.4 125.6,148.9 129.8,150.1 134.0,150.9 138.3,151.4 142.6,151.5 146.9,151.2 151.1,150.6 155.3,149.6 159.4,148.2 163.3,146.5 167.1,144.4 170.7,142.1 174.1,139.4 177.2,136.5 180.1,133.3 182.7,129.8 185.0,126.2 186.9,122.4 188.6,118.4 189.8,114.3 190.8,110.1 191.3,105.8" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="191.5,101.5 241.5,101.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<text x="141.5" y="133.8" text-anchor="middle" fill="#000000" font-size="90.3px" font-family="sans-serif">+</text>
<text x="94.0" y="48.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
<text x="94.0" y="192.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
<g id="u1" class="port">
<polygon points="1.5,21.5 41.5,41.5 1.5,61.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g id="u2" class="port">
<polygon points="1.5,141.5 41.5,161.5 1.5,181.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g id="y" class="port">
<polygon points="241.5,91.5 261.5,101.5 241.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
</g>
</svg>
<svg width="223" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="component">
<polygon points="1.5,201.5 201.5,201.5 201.5,1.5 1.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="21.5,33.5 21.5,181.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polygon points="21.5,11.5 13.5,33.5 29.5,33.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="11.5,101.5 169.5,101.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polygon points="191.5,101.5 169.5,93.5 169.5,109.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="21.5,101.5 27.2,84.4 30.7,73.8 33.8,65.0 36.4,57.8 36.4,57.8 38.2,53.3 39.9,49.1 41.6,45.2 43.2,41.8 43.2,41.8 44.5,39.2 45.7,36.8 46.9,34.7 48.1,32.7 49.2,31.0 49.2,31.0 50.7,29.1 52.1,27.4 53.5,25.9 54.9,24.6 54.9,24.6 56.8,23.4 58.6,22.5 60.5,22.0 60.5,22.0 62.4,22.0 64.2,22.5 66.1,23.3 66.1,23.3 67.5,24.2 68.9,25.4 70.3,26.7 71.8,28.4 71.8,28.4 72.9,29.8 74.0,31.4 75.2,33.1 76.3,35.0 77.4,37.0 77.4,37.0 78.8,39.7 80.3,42.7 81.8,46.1 83.4,49.8 83.4,49.8 85.6,55.3 88.0,61.6 90.6,68.8 90.6,68.8 93.8,78.1 98.0,90.6 103.1,106.3 103.1,106.3 108.2,121.8 112.3,133.7 115.2,142.0 115.2,142.0 117.0,146.7 118.7,151.0 120.4,155.0 122.0,158.7 122.0,158.7 123.3,161.4 124.5,163.9 125.7,166.2 126.9,168.3 128.0,170.2 128.0,170.2 129.4,172.3 130.8,174.2 132.2,175.8 133.6,177.2 133.6,177.2 135.5,178.8 137.4,180.0 139.3,180.7 139.3,180.7 141.2,181.0 143.0,180.9 144.9,180.3 144.9,180.3 146.8,179.3 148.7,177.9 150.6,176.0 150.6,176.0 152.0,174.4 153.4,172.6 154.8,170.5 156.2,168.2 156.2,168.2 157.3,166.2 158.5,164.0 159.7,161.5 160.9,158.9 162.2,156.0 162.2,156.0 164.4,150.7 166.8,144.5 169.4,137.5 169.4,137.5 172.1,129.9 174.8,122.0 177.5,113.9 181.5,101.5" fill-opacity="0" stroke="#000000" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<g id="y" class="port">
<polygon points="201.5,91.5 221.5,101.5 201.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
</g>
</svg>
After loading the svg's into my HTML, is there a way to calculate the size of each of these svg images while ignoring any "port" objects that may be contained in each file? The width and height properties defined in the svg tag tells me the size of the entire image, but I want to know the size of the image without the ports. Also I'd like to be able to know what is the offset from the top left corner of the size of the image without the ports. ie if there is no port on the left side then the offset would be 0, if there was a port on the left side then the offset would be equal to the width taken up by the port on the left side.
If you did a bit of preprocessing, and organised your svg components into two groups - "body" and "ports" - you could do something like this:
// For each SVG, call the getBBoxWithoutPort() function.
document.querySelectorAll('svg').forEach(function(svg) {
console.log(getBBoxWithoutPort(svg));
});
function getBBoxWithoutPort(el) {
// get a reference to the body group
var body = el.querySelector('.body');
// Return its size
return body.getBBox();
}
<svg width="263" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="component">
<g class="body">
<polygon points="41.5,201.5 241.5,201.5 241.5,1.5 41.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="41.5,41.5 67.5,77.5 97.5,77.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="41.5,161.5 67.5,129.5 99.5,129.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polygon points="191.5,101.5 191.3,97.2 190.8,92.9 189.8,88.7 188.6,84.6 186.9,80.6 185.0,76.8 182.7,73.2 180.1,69.7 177.2,66.5 174.1,63.6 170.7,60.9 167.1,58.6 163.3,56.5 159.4,54.8 155.3,53.4 151.1,52.4 146.9,51.8 142.6,51.5 138.3,51.6 134.0,52.1 129.8,52.9 125.6,54.1 121.6,55.6 117.8,57.5 114.1,59.7 110.6,62.2 107.3,65.0 104.3,68.1 101.6,71.4 99.1,75.0 97.0,78.7 95.2,82.6 93.8,86.7 92.7,90.8 91.9,95.1 91.5,99.3 91.5,103.7 91.9,107.9 92.7,112.2 93.8,116.3 95.2,120.4 97.0,124.3 99.1,128.0 101.6,131.6 104.3,134.9 107.3,138.0 110.6,140.8 114.1,143.3 117.8,145.5 121.6,147.4 125.6,148.9 129.8,150.1 134.0,150.9 138.3,151.4 142.6,151.5 146.9,151.2 151.1,150.6 155.3,149.6 159.4,148.2 163.3,146.5 167.1,144.4 170.7,142.1 174.1,139.4 177.2,136.5 180.1,133.3 182.7,129.8 185.0,126.2 186.9,122.4 188.6,118.4 189.8,114.3 190.8,110.1 191.3,105.8" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="191.5,101.5 241.5,101.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<text x="141.5" y="133.8" text-anchor="middle" fill="#000000" font-size="90.3px" font-family="sans-serif">+</text>
<text x="94.0" y="48.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
<text x="94.0" y="192.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
</g>
<g class="ports">
<g id="u1" class="port">
<polygon points="1.5,21.5 41.5,41.5 1.5,61.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g id="u2" class="port">
<polygon points="1.5,141.5 41.5,161.5 1.5,181.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g id="y" class="port">
<polygon points="241.5,91.5 261.5,101.5 241.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
</g>
</g>
</svg>
<svg width="223" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="component">
<g class="body">
<polygon points="1.5,201.5 201.5,201.5 201.5,1.5 1.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="21.5,33.5 21.5,181.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polygon points="21.5,11.5 13.5,33.5 29.5,33.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="11.5,101.5 169.5,101.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polygon points="191.5,101.5 169.5,93.5 169.5,109.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="21.5,101.5 27.2,84.4 30.7,73.8 33.8,65.0 36.4,57.8 36.4,57.8 38.2,53.3 39.9,49.1 41.6,45.2 43.2,41.8 43.2,41.8 44.5,39.2 45.7,36.8 46.9,34.7 48.1,32.7 49.2,31.0 49.2,31.0 50.7,29.1 52.1,27.4 53.5,25.9 54.9,24.6 54.9,24.6 56.8,23.4 58.6,22.5 60.5,22.0 60.5,22.0 62.4,22.0 64.2,22.5 66.1,23.3 66.1,23.3 67.5,24.2 68.9,25.4 70.3,26.7 71.8,28.4 71.8,28.4 72.9,29.8 74.0,31.4 75.2,33.1 76.3,35.0 77.4,37.0 77.4,37.0 78.8,39.7 80.3,42.7 81.8,46.1 83.4,49.8 83.4,49.8 85.6,55.3 88.0,61.6 90.6,68.8 90.6,68.8 93.8,78.1 98.0,90.6 103.1,106.3 103.1,106.3 108.2,121.8 112.3,133.7 115.2,142.0 115.2,142.0 117.0,146.7 118.7,151.0 120.4,155.0 122.0,158.7 122.0,158.7 123.3,161.4 124.5,163.9 125.7,166.2 126.9,168.3 128.0,170.2 128.0,170.2 129.4,172.3 130.8,174.2 132.2,175.8 133.6,177.2 133.6,177.2 135.5,178.8 137.4,180.0 139.3,180.7 139.3,180.7 141.2,181.0 143.0,180.9 144.9,180.3 144.9,180.3 146.8,179.3 148.7,177.9 150.6,176.0 150.6,176.0 152.0,174.4 153.4,172.6 154.8,170.5 156.2,168.2 156.2,168.2 157.3,166.2 158.5,164.0 159.7,161.5 160.9,158.9 162.2,156.0 162.2,156.0 164.4,150.7 166.8,144.5 169.4,137.5 169.4,137.5 172.1,129.9 174.8,122.0 177.5,113.9 181.5,101.5" fill-opacity="0" stroke="#000000" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g class="ports">
<g id="y" class="port">
<polygon points="201.5,91.5 221.5,101.5 201.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
</g>
</g>
</svg>
You can
iterate through your svg elements,
remove their children that you don't want,
get the svg's BBox,
re-append the removed elements where they were.
ES6 implementation would require transpiling or complete rewrite for ES5 browsers.
console.log(
[...document.querySelectorAll('svg')]
.map(getBBoxWithoutPort)
);
function getBBoxWithoutPort(el) {
// grab all the .port elements and store in an Array
const ports = [...el.querySelectorAll('.port')];
ports.forEach(p => {
// store their parentNode and nextSibling
p._parent = p.parentNode;
p._next = p.nextElementSibling;
// remove it from the DOM
p.remove();
});
// now get the size of the parent SVG node
const size = el.getBBox();
ports.forEach(p => {
// re-append your removed elements
p._parent.insertBefore(p, (p._next && p._next.parentNode) ? p._next : null);
// clean
delete p._parent;
delete p._next;
});
return size;
}
<svg width="263" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="component">
<polygon points="41.5,201.5 241.5,201.5 241.5,1.5 41.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="41.5,41.5 67.5,77.5 97.5,77.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="41.5,161.5 67.5,129.5 99.5,129.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polygon points="191.5,101.5 191.3,97.2 190.8,92.9 189.8,88.7 188.6,84.6 186.9,80.6 185.0,76.8 182.7,73.2 180.1,69.7 177.2,66.5 174.1,63.6 170.7,60.9 167.1,58.6 163.3,56.5 159.4,54.8 155.3,53.4 151.1,52.4 146.9,51.8 142.6,51.5 138.3,51.6 134.0,52.1 129.8,52.9 125.6,54.1 121.6,55.6 117.8,57.5 114.1,59.7 110.6,62.2 107.3,65.0 104.3,68.1 101.6,71.4 99.1,75.0 97.0,78.7 95.2,82.6 93.8,86.7 92.7,90.8 91.9,95.1 91.5,99.3 91.5,103.7 91.9,107.9 92.7,112.2 93.8,116.3 95.2,120.4 97.0,124.3 99.1,128.0 101.6,131.6 104.3,134.9 107.3,138.0 110.6,140.8 114.1,143.3 117.8,145.5 121.6,147.4 125.6,148.9 129.8,150.1 134.0,150.9 138.3,151.4 142.6,151.5 146.9,151.2 151.1,150.6 155.3,149.6 159.4,148.2 163.3,146.5 167.1,144.4 170.7,142.1 174.1,139.4 177.2,136.5 180.1,133.3 182.7,129.8 185.0,126.2 186.9,122.4 188.6,118.4 189.8,114.3 190.8,110.1 191.3,105.8" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="191.5,101.5 241.5,101.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<text x="141.5" y="133.8" text-anchor="middle" fill="#000000" font-size="90.3px" font-family="sans-serif">+</text>
<text x="94.0" y="48.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
<text x="94.0" y="192.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
<g id="u1" class="port">
<polygon points="1.5,21.5 41.5,41.5 1.5,61.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g id="u2" class="port">
<polygon points="1.5,141.5 41.5,161.5 1.5,181.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g id="y" class="port">
<polygon points="241.5,91.5 261.5,101.5 241.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
</g>
</svg>
<svg width="223" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="component">
<polygon points="1.5,201.5 201.5,201.5 201.5,1.5 1.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="21.5,33.5 21.5,181.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polygon points="21.5,11.5 13.5,33.5 29.5,33.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="11.5,101.5 169.5,101.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polygon points="191.5,101.5 169.5,93.5 169.5,109.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<polyline points="21.5,101.5 27.2,84.4 30.7,73.8 33.8,65.0 36.4,57.8 36.4,57.8 38.2,53.3 39.9,49.1 41.6,45.2 43.2,41.8 43.2,41.8 44.5,39.2 45.7,36.8 46.9,34.7 48.1,32.7 49.2,31.0 49.2,31.0 50.7,29.1 52.1,27.4 53.5,25.9 54.9,24.6 54.9,24.6 56.8,23.4 58.6,22.5 60.5,22.0 60.5,22.0 62.4,22.0 64.2,22.5 66.1,23.3 66.1,23.3 67.5,24.2 68.9,25.4 70.3,26.7 71.8,28.4 71.8,28.4 72.9,29.8 74.0,31.4 75.2,33.1 76.3,35.0 77.4,37.0 77.4,37.0 78.8,39.7 80.3,42.7 81.8,46.1 83.4,49.8 83.4,49.8 85.6,55.3 88.0,61.6 90.6,68.8 90.6,68.8 93.8,78.1 98.0,90.6 103.1,106.3 103.1,106.3 108.2,121.8 112.3,133.7 115.2,142.0 115.2,142.0 117.0,146.7 118.7,151.0 120.4,155.0 122.0,158.7 122.0,158.7 123.3,161.4 124.5,163.9 125.7,166.2 126.9,168.3 128.0,170.2 128.0,170.2 129.4,172.3 130.8,174.2 132.2,175.8 133.6,177.2 133.6,177.2 135.5,178.8 137.4,180.0 139.3,180.7 139.3,180.7 141.2,181.0 143.0,180.9 144.9,180.3 144.9,180.3 146.8,179.3 148.7,177.9 150.6,176.0 150.6,176.0 152.0,174.4 153.4,172.6 154.8,170.5 156.2,168.2 156.2,168.2 157.3,166.2 158.5,164.0 159.7,161.5 160.9,158.9 162.2,156.0 162.2,156.0 164.4,150.7 166.8,144.5 169.4,137.5 169.4,137.5 172.1,129.9 174.8,122.0 177.5,113.9 181.5,101.5" fill-opacity="0" stroke="#000000" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
<g id="y" class="port">
<polygon points="201.5,91.5 221.5,101.5 201.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
</g>
</g>
</svg>
how to reference an inline svg as cursor?
In the code attach, first cursor declaration "cursor:pointer" an second (png) works without problems.
Third declaration doesn't work for me. What I'm doing wrong?. Only need a working sample
Thanks in advance
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
>
<script type='text/ecmascript'>
<style>
.boton
{
/*cursor:pointer
cursor: url(data:image/png;base64,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), auto;);
*/
cursor: url(data:image/svg+xml;utf8,<svg fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>), auto;);
}
</style>
</script>
<g id="toggleInsertaElementoLS" class="boton" toggleButton="true" triStateButton="false">
<path id="bordeLS" fill="url(#rellenoBotonesInsercion)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M6.875,282.375h46c1.104,0,2,0.895,2,2v21c0,1.104-0.896,2-2,2h-46c-1.104,0-2-0.896-2-2v-21
C4.875,283.27,5.771,282.375,6.875,282.375z"/>
<g id="dibujoLS">
<path fill="#660000" stroke="#660000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M22.46,296.273v-9.67h1.28v8.529h4.763v1.141H22.46z"/>
<path fill="#660000" stroke="#660000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M29.59,293.156l1.209-0.104c0.055,0.479,0.188,0.881,0.398,1.188c0.207,0.313,0.533,0.563,0.973,0.752
c0.44,0.191,0.933,0.285,1.482,0.285c0.489,0,0.92-0.074,1.293-0.217c0.374-0.146,0.652-0.346,0.834-0.6
c0.182-0.25,0.276-0.527,0.276-0.826c0-0.31-0.088-0.57-0.264-0.795c-0.178-0.229-0.464-0.414-0.871-0.57
c-0.26-0.1-0.833-0.26-1.719-0.471c-0.891-0.216-1.511-0.416-1.867-0.604c-0.462-0.241-0.806-0.543-1.03-0.896
c-0.23-0.359-0.342-0.77-0.342-1.205c0-0.49,0.138-0.943,0.417-1.371c0.275-0.422,0.679-0.748,1.213-0.965
c0.532-0.229,1.124-0.332,1.775-0.332c0.716,0,1.349,0.117,1.897,0.346c0.548,0.232,0.967,0.57,1.264,1.021
c0.292,0.438,0.453,0.945,0.475,1.521l-1.227,0.09c-0.064-0.604-0.288-1.063-0.667-1.383c-0.382-0.313-0.944-0.469-1.688-0.469
c-0.772,0-1.337,0.141-1.691,0.428c-0.354,0.281-0.531,0.625-0.531,1.025c0,0.346,0.126,0.631,0.375,0.854
c0.245,0.229,0.889,0.453,1.931,0.689c1.038,0.229,1.752,0.438,2.14,0.617c0.563,0.258,0.979,0.588,1.246,0.979
c0.267,0.396,0.403,0.857,0.403,1.375c0,0.521-0.148,1.002-0.442,1.455s-0.716,0.813-1.269,1.063
c-0.554,0.256-1.172,0.383-1.864,0.383c-0.876,0-1.608-0.127-2.199-0.385c-0.593-0.262-1.056-0.646-1.392-1.148
C29.784,294.389,29.607,293.811,29.59,293.156z"/>
<line shape-rendering="geometricPrecision" fill="none" stroke="#2F5F9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" x1="8" y1="301.125" x2="51.75" y2="301.125"/>
</g>
</g>
</svg>
It works once I cleaned up the syntax a little i.e. the extraneous brackets and semicolons.
The cursor is the one you provided.
.boton {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>'), auto;
}
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
>
<rect class="boton" width="100%" height="100%" fill="blue"/>
</svg>