Related
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';
}
}
this is my code:
<div className="Aktiendashboard-AllgemeineInfo-container">
<Tabs value={value} onChange={handleChange} aria-label="icon label tabs example">
<Tab icon={ <SvgIcon>
**<path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />**
</SvgIcon>}
label="Company" value="Company"/>
<Tab icon={ <SvgIcon>
Put SVG Inside this
</SvgIcon>}
label="Company" value="Company"/>
<Tab icon={<PersonPinIcon />} label="Charts" value="Charts" />
<Tab icon={<ApartmentIcon />} label="Valuation" value="Valuation" />
<Tab icon={<CalculateIcon />} label="Dividende" value="Dividende" />
<Tab icon={<PersonSearchIcon />} label="Eigentum" value="Eigentum" />
</Tabs>
</div>
i have some problems with .svg icons. The first icon is an arrow () and it fits very well.
But when I want to insert a different svg path it doesn't work. For example this svg path:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fill-rule="evenodd"/>
<path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fill-rule="evenodd"/>
<path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fill-rule="evenodd"/>
</svg>
Can u help me how I can implement the svg path to my code? I want to insert the svg path from the second code snippet into the "Put SVG inside This" line. It doesn't show up anything yet
Thanks and have a great weekend
if you can use html
<Tab icon={ <SvgIcon>
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fill-rule="evenodd"/>
<path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fill-rule="evenodd"/>
<path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fill-rule="evenodd"/>
</svg>
</SvgIcon>}
if you can use react
<Tab icon={ <SvgIcon>
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
<path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fillRule="evenodd"/>
<path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fillRule="evenodd"/>
<path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fillRule="evenodd"/>
</svg>
</SvgIcon>}
I'm trying to add images to SVG paths as the title is saying.
I've made the following fiddle,
JSFiddle
I'd like to put images within the paths, like so,
(Green dots representing images)
so image
How would this be done? I tried adding images to the path, but they just didn't show up, obviously.
Code:
<svg width="175" height="175">
<g transform="translate(87.5,87.5)">
<path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path>
<path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path>
<path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path>
<path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path>
<path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path>
</g>
</svg>
Following the picture, you need to add 5 circles.
Each circle is rotated relative to the other by the same angle - 360/5 = 72
Create the first circle:
<defs>
<circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" />
</defs>
Use the command <use> to clone the circle and rotate it transform
=" rotate (deg x y) " to the desired angle relative to the first circle.
<svg width="175" height="175" >
<defs>
<circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" />
</defs>
<g transform="translate(87.5,87.5)">
<path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path>
<path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path>
<path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path>
<path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path>
<path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path>
</g>
<use xlink:href="#greenCircle" transform="rotate(-10 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(62 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(134 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(206 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(278 87.5 87.5)" />
</svg>
Here's a hint, add this to your fiddle:
<circle cx="0" cy="0" r="10" fill="#12345"></circle>
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>
Well, basically I have a SVG file which coordinates are calculated taking into account the screen resolution. Nonetheless, I have now a process that sends the SVG to another computer and adjusts each object to the resolution of the receiving computer. For that, I use the transformation matrix as you can see in object "OjeB0J0NzcPolyline1507". Everything went well, until now that I have to deal with masks.
Basically, the mask crops the SVG like if the mask was applied before the transformation and since the mask has a specific size, everything that is outside the mask is cropped. Nonetheless, I have already tried to make the svgjsRubberRect bigger and anything seems to work.
Is there any way to adjust the mask so the whole object is shown with exception to what is covered by the element"OjeB0J0NzcPath1519"
EDIT:
Original SVG:
<g id="canvas">
<polyline fill="none" stroke-width="185" stroke="#000000" stroke-opacity="1" stroke-linecap="round" stroke-linejoin="round" class="svg-selectable svg-editable svg-replaceable" mask="url('#zxjzF2hIO8Mask1276')" points="38,64 38,64 37,64 40,62 49,61 61,59 78,57 98,55 122,51 167,43 203,40 245,34 286,34 343,34 399,34 535,35 606,44 678,54 747,65 821,75 895,82 965,97 1036,103 1101,103 1157,103 1206,103 1252,103 1287,103 1322,95 1363,47 1265,27 1207,23 1159,16 1108,16 1062,14 1016,14 969,14 921,14 883,14 850,14 821,9 803,6 792,4 769,1 775,1 788,1 808,1 833,1 868,1 912,1 955,1 1005,6 1062,6 1296,32 1327,114 1250,123 1170,131 1070,134 960,134 844,134 712,134 580,134 432,134 286,134 152,134 12,134 0,134 0,147 0,158 0,168 0,172 8,172 27,172 51,172 81,172 122,172 157,172 260,172 325,172 398,172 487,172 578,172 665,172 846,179 918,189 1064,208 1125,216 1198,228 1213,233 1220,237 1215,245 1196,249 1154,256 1093,266 1016,277 923,284 707,284 592,284 462,284 330,284 190,284 58,284 0,284 0,286 0,277 0,276 0,275 0,276 3,278 9,282 17,283 47,286 74,286 112,286 161,286 220,286 301,286 482,286 590,286 703,286 946,286 1086,286 1337,298 1265,369 1144,369 1016,363 883,347 756,340 523,324 421,308 345,306 253,306 243,306 269,306 323,306 391,306 480,306 574,306 674,306 777,308 895,308 1104,312 1190,314 1263,314 1320,314 1343,314 1286,314 1217,307 1148,296 1085,288 995,275 981,270 974,266 973,266 973,264 977,261 996,256 1152,236 1217,232 1362,221 1335,214 1282,213 1266,213 1254,213 1242,215 1234,220 1232,225 1232,229 1232,233 1307,244 1364,226 1302,226 1226,226 857,226 654,227 557,232 150,276 68,287 11,306 0,331 0,336 0,337 1,337 3,339 10,339 14,341 19,343 21,343 24,343 26,343 28,343 30,342 33,342 53,342 87,339 219,348 288,354 362,365 428,375 500,386 688,412 733,420 788,429 804,437 804,441 768,456 713,466 547,477 72,477 0,477 0,461 0,454 19,454 71,454 128,454 203,454 295,454 406,452 519,448 1038,499 819,552 719,561 511,565 397,565 279,565 176,565 6,565 0,565 14,568 91,568 142,568 215,568 401,568 604,568 703,568 872,575 935,591" id="2HCqPWHVecPolyline1238"></polyline>
</g>
<defs id="zxjzF2hIO8Defs1001">
<rect id="SvgjsRubberRect" width="800" height="1317" fill="#ffffff" stroke="none" class="svg-reserved svg-rubber svg-replaceable"></rect>
<path id="2HCqPWHVecPath1253" d="M212 177L212 177L217 177L235 179L243 179L268 179L280 179L319 163L362 155L386 155L398 155L496 177L507 182L528 187L560 196L611 211L667 221L677 222L721 228L730 228L762 228L794 229 " fill="none" stroke="black" stroke-linejoin="round" stroke-linecap="round" class="svg-reserved svg-rubber svg-replaceable"></path>
<mask id="zxjzF2hIO8Mask1276" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" class="svg-replaceable">
<use id="zxjzF2hIO8Use1277" xlink:href="#SvgjsRubberRect"></use>
<use id="zxjzF2hIO8Use1278" xlink:href="#2HCqPWHVecPath1253" stroke="#000000" stroke-width="10" > </use>
</mask>
</defs>
</svg>
Scaled SVG:
<svg id="zxjzF2hIO8Svg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="canvas">
<polyline transform="matrix(0.312592 0 0 0.462912 0 0)" fill="none" stroke-width="185" stroke="#000000" stroke-opacity="1" stroke-linecap="round" stroke-linejoin="round" class="svg-selectable svg-editable svg-replaceable" mask="url('#zxjzF2hIO8Mask1276')" points="38,64 38,64 37,64 40,62 49,61 61,59 78,57 98,55 122,51 167,43 203,40 245,34 286,34 343,34 399,34 535,35 606,44 678,54 747,65 821,75 895,82 965,97 1036,103 1101,103 1157,103 1206,103 1252,103 1287,103 1322,95 1363,47 1265,27 1207,23 1159,16 1108,16 1062,14 1016,14 969,14 921,14 883,14 850,14 821,9 803,6 792,4 769,1 775,1 788,1 808,1 833,1 868,1 912,1 955,1 1005,6 1062,6 1296,32 1327,114 1250,123 1170,131 1070,134 960,134 844,134 712,134 580,134 432,134 286,134 152,134 12,134 0,134 0,147 0,158 0,168 0,172 8,172 27,172 51,172 81,172 122,172 157,172 260,172 325,172 398,172 487,172 578,172 665,172 846,179 918,189 1064,208 1125,216 1198,228 1213,233 1220,237 1215,245 1196,249 1154,256 1093,266 1016,277 923,284 707,284 592,284 462,284 330,284 190,284 58,284 0,284 0,286 0,277 0,276 0,275 0,276 3,278 9,282 17,283 47,286 74,286 112,286 161,286 220,286 301,286 482,286 590,286 703,286 946,286 1086,286 1337,298 1265,369 1144,369 1016,363 883,347 756,340 523,324 421,308 345,306 253,306 243,306 269,306 323,306 391,306 480,306 574,306 674,306 777,308 895,308 1104,312 1190,314 1263,314 1320,314 1343,314 1286,314 1217,307 1148,296 1085,288 995,275 981,270 974,266 973,266 973,264 977,261 996,256 1152,236 1217,232 1362,221 1335,214 1282,213 1266,213 1254,213 1242,215 1234,220 1232,225 1232,229 1232,233 1307,244 1364,226 1302,226 1226,226 857,226 654,227 557,232 150,276 68,287 11,306 0,331 0,336 0,337 1,337 3,339 10,339 14,341 19,343 21,343 24,343 26,343 28,343 30,342 33,342 53,342 87,339 219,348 288,354 362,365 428,375 500,386 688,412 733,420 788,429 804,437 804,441 768,456 713,466 547,477 72,477 0,477 0,461 0,454 19,454 71,454 128,454 203,454 295,454 406,452 519,448 1038,499 819,552 719,561 511,565 397,565 279,565 176,565 6,565 0,565 14,568 91,568 142,568 215,568 401,568 604,568 703,568 872,575 935,591" id="2HCqPWHVecPolyline1238"></polyline>
</g>
<defs id="zxjzF2hIO8Defs1001">
<rect id="SvgjsRubberRect" width="800" height="1317" fill="#ffffff" stroke="none" class="svg-reserved svg-rubber svg-replaceable"></rect>
<path id="2HCqPWHVecPath1253" d="M212 177L212 177L217 177L235 179L243 179L268 179L280 179L319 163L362 155L386 155L398 155L496 177L507 182L528 187L560 196L611 211L667 221L677 222L721 228L730 228L762 228L794 229 " fill="none" stroke="black" stroke-linejoin="round" stroke-linecap="round" class="svg-reserved svg-rubber svg-replaceable" transform="matrix(0.312592 0 0 0.462912 0 0)"></path>
<mask id="zxjzF2hIO8Mask1276" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" class="svg-replaceable">
<use id="zxjzF2hIO8Use1277" xlink:href="#SvgjsRubberRect"></use>
<use id="zxjzF2hIO8Use1278" xlink:href="#2HCqPWHVecPath1253" stroke="#000000" stroke-width="10" transform="matrix(3.19906 0 0 2.16024 0 0)"> </use>
</mask>
</defs>
</svg>