SVG inside HTML doesn't apply basic CSS - html
Trying to make a basic map with hovering areas - using SVG.
I cant understand why SVG (inside html) isn't reacting to basic CSS, tried hovering paths, then just changing color - but none work. I cant find why.
SVG elements react only if the code is applied directly in html style.
.p1-pos {max-width: 50rem; margin: auto}
path {fill: rgb(93, 93, 131)}
path:hover {fill: bisque}
<div class="p1-pos">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 184.13573 153.7863"
version="1.1"
id="svg8"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="ten.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="353.68731"
inkscape:cy="296.33408"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
units="px"
inkscape:window-width="993"
inkscape:window-height="727"
inkscape:window-x="2239"
inkscape:window-y="83"
inkscape:window-maximized="0" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-12.253565,-73.452084)">
<g
transform="translate(-3.4347496,-8.6454107)"
id="layer1-1"
inkscape:label="Layer 1">
<path
style="fill:none;stroke:#101010;stroke-width:2.79112649;stroke-miterlimit:10"
inkscape:connector-curvature="0"
stroke-miterlimit="10"
d="m 29.637126,160.10752 c -2.014139,-3.34132 -4.07245,-3.76035 -4.229412,-6.0628 -0.156934,-2.30245 -1.48781,-4.06796 -2.976562,-5.52587 -1.488753,-1.45791 -0.468996,-1.07478 -2.270722,-2.91675 -1.801733,-1.84194 -5.24729,-2.83936 -1.17484,-4.6813 4.072454,-1.84197 8.85075,-3.30079 11.591408,-5.2192 2.740656,-1.9184 3.524505,-3.22341 5.169276,-2.6865 1.644771,0.53691 3.759477,3.60745 9.55565,4.29821 5.79617,0.69074 11.278423,0.84457 15.585846,-0.99741 4.307419,-1.84198 8.615773,-4.52846 13.158175,-4.45109 4.54238,0.0773 12.375238,1.7655 16.05578,0.92097 3.68051,-0.84451 8.92969,-4.98895 11.827305,-5.83347 2.89761,-0.84453 9.24267,-0.38314 11.20042,-2.3789 1.95775,-1.99574 7.51897,-5.67964 7.51897,-5.67964 0,0 2.4286,-2.07222 3.68145,-3.37724 1.25286,-1.30506 3.99445,-5.06539 5.87416,-6.90734 1.87976,-1.84194 3.68054,-4.37465 3.68054,-6.75355 0,-2.378849 3.68149,-7.213996 6.26612,-8.212356 2.58461,-0.998309 8.06782,-1.151183 10.26054,-2.839351 2.19273,-1.688169 3.2886,-2.302429 3.75855,-4.220837 0.46993,-1.918408 4.38541,-2.840324 6.81403,-1.305043 2.42864,1.535269 7.59696,0.153887 10.10362,0.767174 2.50662,0.613366 6.89299,3.377232 12.06227,0.997452 5.16928,-2.379833 4.46437,-3.377246 7.04901,-3.530108 2.58464,-0.152757 6.65803,0.613353 7.59788,3.760334 0.93989,3.146967 1.48691,6.830909 -3.36845,9.670272 -4.85538,2.839379 -7.67499,5.833473 -10.02466,6.830893 -2.3497,0.99738 -9.86862,1.9184 -10.96545,5.14181 -1.09684,3.22342 -1.40886,5.44943 -4.77736,7.21403 -3.3685,1.76458 -8.53776,7.29137 -10.26057,9.74671 -1.72278,2.45534 -2.50566,2.83937 -5.95216,4.14438 -3.44652,1.30506 -6.65805,2.68651 -7.83287,7.52163 -1.17486,4.83517 -1.72371,6.83091 -0.70492,8.97954 1.01882,2.14862 2.03576,3.83772 1.40982,6.29304 -0.62595,2.45533 -5.48321,5.75611 -5.6392,8.05855 -0.15598,2.30246 -3.05364,8.21146 -4.62039,11.51222 -1.56678,3.30079 -5.63923,8.28879 -5.7962,12.66346 -0.15693,4.37465 0.54793,10.36191 -2.50663,13.20127 -3.05458,2.8394 -12.53128,14.27425 -15.11593,16.73049 -2.58462,2.45627 -7.44092,7.21406 -8.77177,9.28625 -1.33085,2.07218 -3.289555,2.37888 -8.223855,2.53267 -4.934322,0.15388 -8.14585,0.69076 -11.435389,3.22342 -3.289553,2.5327 -3.05457,2.07224 -5.326249,2.226 -2.271666,0.15389 -4.229413,0.61338 -6.65709,1.91841 -2.42768,1.30502 -5.091273,-1.53435 -5.247292,-2.91581 -0.155982,-1.38148 0.391935,-7.44426 -0.704889,-9.2098 -1.096843,-1.76549 -5.795242,-1.68905 -5.952196,-5.60321 -0.156973,-3.91417 0.391923,-4.37375 -5.247292,-10.05339 -5.639212,-5.6797 -10.80849,-10.59034 -11.043459,-14.12137 -0.234983,-3.53101 -2.506632,-7.21402 -4.542385,-8.97954 -2.035759,-1.7655 -4.307421,-5.67965 -3.994443,-8.44259 0.312989,-2.76293 2.506627,-7.06206 0.469931,-9.28716 -2.036695,-2.22505 -4.309295,-3.75848 -5.328116,-5.44756 z"
id="path20" />
<a xlink:href="http://svgtutorial.com/styling-svg-with-css/">
<path
sodipodi:nodetypes="ccccccccccccsccccccccc"
inkscape:connector-curvature="0"
id="path42"
d="m 21.069671,142.60696 8.744703,-2.69068 4.93291,-3.36335 4.26024,2.46646 5.157133,1.34534 9.417372,0.89689 7.175141,-0.89689 11.211157,-4.93291 13.677614,1.12111 6.950919,-0.67267 10.09004,-4.70868 20.40431,4.93291 c 0,0 -69.060736,63.9036 -69.957628,63.9036 -0.896893,0 -6.278248,-6.7267 -6.278248,-6.7267 l -2.242232,-7.17514 -5.605578,-7.39936 -1.345339,-3.36335 1.121115,-8.29626 -3.363347,-5.38135 -6.950918,-7.84782 -3.363347,-7.62358 z"
style="fill:#ffccaa;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</a>
<path
sodipodi:nodetypes="ccccccccccccccccccscccc"
inkscape:connector-curvature="0"
id="path44"
d="m 60.757172,197.54164 65.159788,-59.83247 13.99099,11.40026 2.018,3.81179 -3.58757,2.46646 -1.79378,5.60558 -4.26024,10.76271 -5.15713,7.84781 -1.12112,4.03602 -0.22422,10.76271 -23.99188,25.78566 -1.34534,2.01801 -7.175141,1.56956 -6.950919,0.67267 -6.054024,4.03602 -5.605579,0.44845 -3.363348,1.56956 h -1.121117 c 0,0 -0.672668,-9.6416 -1.121113,-10.76271 -0.448448,-1.12112 -5.605582,-3.58757 -5.605582,-3.58757 l -1.121114,-6.05403 -6.726696,-7.84781 z"
style="fill:#ffccaa;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="cccccccccccccccccccccccccccc"
inkscape:connector-curvature="0"
id="path46"
d="m 108.56809,130.60168 16.43433,3.5916 6.817,4.33877 8.0516,7.09367 2.04559,-11.71675 3.5829,-5.23655 7.71702,-2.75607 9.37065,-10.19748 6.61459,-3.85851 1.92925,-7.44141 11.57552,-3.8585 11.57552,-7.992626 -1.10243,-4.68533 -1.65364,-0.826823 -6.61459,3.307292 -6.61458,0.826823 -6.89019,-1.653646 h -6.06337 l -7.1658,-1.653646 h -0.55121 l -3.85851,4.68533 -10.47309,4.409722 v 0 l -4.73981,2.135419 -0.77707,5.588685 -6.6079,7.92007 -10.99554,11.06377 z"
style="fill:#ffccaa;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</svg>
</div>
If you only want to change the fills, just remove them from the html source and do wath you want in the css code like this.
.p1-pos {max-width: 50rem; margin: auto}
path {fill: rgb(93, 93, 131)}
path:hover {fill: bisque}
<div class="p1-pos">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 184.13573 153.7863"
version="1.1"
id="svg8"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="ten.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="353.68731"
inkscape:cy="296.33408"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
units="px"
inkscape:window-width="993"
inkscape:window-height="727"
inkscape:window-x="2239"
inkscape:window-y="83"
inkscape:window-maximized="0" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-12.253565,-73.452084)">
<g
transform="translate(-3.4347496,-8.6454107)"
id="layer1-1"
inkscape:label="Layer 1">
<path
style="fill:none;stroke:#101010;stroke-width:2.79112649;stroke-miterlimit:10"
inkscape:connector-curvature="0"
stroke-miterlimit="10"
d="m 29.637126,160.10752 c -2.014139,-3.34132 -4.07245,-3.76035 -4.229412,-6.0628 -0.156934,-2.30245 -1.48781,-4.06796 -2.976562,-5.52587 -1.488753,-1.45791 -0.468996,-1.07478 -2.270722,-2.91675 -1.801733,-1.84194 -5.24729,-2.83936 -1.17484,-4.6813 4.072454,-1.84197 8.85075,-3.30079 11.591408,-5.2192 2.740656,-1.9184 3.524505,-3.22341 5.169276,-2.6865 1.644771,0.53691 3.759477,3.60745 9.55565,4.29821 5.79617,0.69074 11.278423,0.84457 15.585846,-0.99741 4.307419,-1.84198 8.615773,-4.52846 13.158175,-4.45109 4.54238,0.0773 12.375238,1.7655 16.05578,0.92097 3.68051,-0.84451 8.92969,-4.98895 11.827305,-5.83347 2.89761,-0.84453 9.24267,-0.38314 11.20042,-2.3789 1.95775,-1.99574 7.51897,-5.67964 7.51897,-5.67964 0,0 2.4286,-2.07222 3.68145,-3.37724 1.25286,-1.30506 3.99445,-5.06539 5.87416,-6.90734 1.87976,-1.84194 3.68054,-4.37465 3.68054,-6.75355 0,-2.378849 3.68149,-7.213996 6.26612,-8.212356 2.58461,-0.998309 8.06782,-1.151183 10.26054,-2.839351 2.19273,-1.688169 3.2886,-2.302429 3.75855,-4.220837 0.46993,-1.918408 4.38541,-2.840324 6.81403,-1.305043 2.42864,1.535269 7.59696,0.153887 10.10362,0.767174 2.50662,0.613366 6.89299,3.377232 12.06227,0.997452 5.16928,-2.379833 4.46437,-3.377246 7.04901,-3.530108 2.58464,-0.152757 6.65803,0.613353 7.59788,3.760334 0.93989,3.146967 1.48691,6.830909 -3.36845,9.670272 -4.85538,2.839379 -7.67499,5.833473 -10.02466,6.830893 -2.3497,0.99738 -9.86862,1.9184 -10.96545,5.14181 -1.09684,3.22342 -1.40886,5.44943 -4.77736,7.21403 -3.3685,1.76458 -8.53776,7.29137 -10.26057,9.74671 -1.72278,2.45534 -2.50566,2.83937 -5.95216,4.14438 -3.44652,1.30506 -6.65805,2.68651 -7.83287,7.52163 -1.17486,4.83517 -1.72371,6.83091 -0.70492,8.97954 1.01882,2.14862 2.03576,3.83772 1.40982,6.29304 -0.62595,2.45533 -5.48321,5.75611 -5.6392,8.05855 -0.15598,2.30246 -3.05364,8.21146 -4.62039,11.51222 -1.56678,3.30079 -5.63923,8.28879 -5.7962,12.66346 -0.15693,4.37465 0.54793,10.36191 -2.50663,13.20127 -3.05458,2.8394 -12.53128,14.27425 -15.11593,16.73049 -2.58462,2.45627 -7.44092,7.21406 -8.77177,9.28625 -1.33085,2.07218 -3.289555,2.37888 -8.223855,2.53267 -4.934322,0.15388 -8.14585,0.69076 -11.435389,3.22342 -3.289553,2.5327 -3.05457,2.07224 -5.326249,2.226 -2.271666,0.15389 -4.229413,0.61338 -6.65709,1.91841 -2.42768,1.30502 -5.091273,-1.53435 -5.247292,-2.91581 -0.155982,-1.38148 0.391935,-7.44426 -0.704889,-9.2098 -1.096843,-1.76549 -5.795242,-1.68905 -5.952196,-5.60321 -0.156973,-3.91417 0.391923,-4.37375 -5.247292,-10.05339 -5.639212,-5.6797 -10.80849,-10.59034 -11.043459,-14.12137 -0.234983,-3.53101 -2.506632,-7.21402 -4.542385,-8.97954 -2.035759,-1.7655 -4.307421,-5.67965 -3.994443,-8.44259 0.312989,-2.76293 2.506627,-7.06206 0.469931,-9.28716 -2.036695,-2.22505 -4.309295,-3.75848 -5.328116,-5.44756 z"
id="path20" />
<a xlink:href="http://svgtutorial.com/styling-svg-with-css/">
<path
sodipodi:nodetypes="ccccccccccccsccccccccc"
inkscape:connector-curvature="0"
id="path42"
d="m 21.069671,142.60696 8.744703,-2.69068 4.93291,-3.36335 4.26024,2.46646 5.157133,1.34534 9.417372,0.89689 7.175141,-0.89689 11.211157,-4.93291 13.677614,1.12111 6.950919,-0.67267 10.09004,-4.70868 20.40431,4.93291 c 0,0 -69.060736,63.9036 -69.957628,63.9036 -0.896893,0 -6.278248,-6.7267 -6.278248,-6.7267 l -2.242232,-7.17514 -5.605578,-7.39936 -1.345339,-3.36335 1.121115,-8.29626 -3.363347,-5.38135 -6.950918,-7.84782 -3.363347,-7.62358 z"
style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</a>
<path
sodipodi:nodetypes="ccccccccccccccccccscccc"
inkscape:connector-curvature="0"
id="path44"
d="m 60.757172,197.54164 65.159788,-59.83247 13.99099,11.40026 2.018,3.81179 -3.58757,2.46646 -1.79378,5.60558 -4.26024,10.76271 -5.15713,7.84781 -1.12112,4.03602 -0.22422,10.76271 -23.99188,25.78566 -1.34534,2.01801 -7.175141,1.56956 -6.950919,0.67267 -6.054024,4.03602 -5.605579,0.44845 -3.363348,1.56956 h -1.121117 c 0,0 -0.672668,-9.6416 -1.121113,-10.76271 -0.448448,-1.12112 -5.605582,-3.58757 -5.605582,-3.58757 l -1.121114,-6.05403 -6.726696,-7.84781 z"
style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="cccccccccccccccccccccccccccc"
inkscape:connector-curvature="0"
id="path46"
d="m 108.56809,130.60168 16.43433,3.5916 6.817,4.33877 8.0516,7.09367 2.04559,-11.71675 3.5829,-5.23655 7.71702,-2.75607 9.37065,-10.19748 6.61459,-3.85851 1.92925,-7.44141 11.57552,-3.8585 11.57552,-7.992626 -1.10243,-4.68533 -1.65364,-0.826823 -6.61459,3.307292 -6.61458,0.826823 -6.89019,-1.653646 h -6.06337 l -7.1658,-1.653646 h -0.55121 l -3.85851,4.68533 -10.47309,4.409722 v 0 l -4.73981,2.135419 -0.77707,5.588685 -6.6079,7.92007 -10.99554,11.06377 z"
style="stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</svg>
</div>
Related
Circle mask progress bar
I need to make a progress bar by overlaying one svg on another (the same but translucent) I tried many ways to solve this problem, but nothing worked for me, I will be glad for any solutions to the problem. SVG 1( translucent) <svg class="rpm-svg center" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"> <path d="M75.8122 156.886C75.7221 158.54 74.3071 159.814 72.6572 159.662C69.9318 159.411 67.2211 159.02 64.5358 158.491C62.9102 158.171 61.9128 156.549 62.2938 154.937L64.0713 147.414C64.4523 145.801 66.0673 144.81 67.6954 145.118C69.5857 145.475 71.4907 145.75 73.4049 145.941C75.0535 146.106 76.3227 147.513 76.2326 149.168L75.8122 156.886Z" fill="white" fill-opacity="0.15" /> <path d="M59.8939 154.329C59.4612 155.928 57.812 156.879 56.23 156.387C53.6166 155.574 51.0467 154.627 48.5304 153.55C47.0072 152.899 46.3694 151.105 47.0778 149.607L50.3827 142.619C51.0911 141.122 52.8772 140.488 54.4055 141.128C56.18 141.871 57.986 142.537 59.8184 143.122C61.3966 143.627 62.3449 145.268 61.9123 146.867L59.8939 154.329Z" fill="white" fill-opacity="0.15" /> <path d="M45.0911 148.632C44.3399 150.109 42.5307 150.702 41.0831 149.896C38.6918 148.565 36.3705 147.112 34.1282 145.542C32.7707 144.592 32.514 142.706 33.5143 141.385L38.1809 135.222C39.1811 133.902 41.059 133.648 42.4238 134.587C44.0084 135.678 45.6398 136.699 47.3133 137.648C48.7546 138.465 49.3466 140.266 48.5955 141.742L45.0911 148.632Z" fill="white" fill-opacity="0.15" /> <path d="M31.755 140.012C30.7168 141.303 28.8244 141.513 27.5729 140.427C25.5056 138.633 23.5317 136.735 21.659 134.739C20.5253 133.53 20.6611 131.631 21.911 130.544L27.7424 125.47C28.9923 124.382 30.8824 124.519 32.0254 125.718C33.3526 127.111 34.7398 128.445 36.183 129.717C37.426 130.813 37.6363 132.696 36.5981 133.987L31.755 140.012Z" fill="white" fill-opacity="0.15" /> <path d="M20.5283 128.909C19.2486 129.962 17.3532 129.781 16.3495 128.463C14.6916 126.285 13.1464 124.024 11.7202 121.688C10.8568 120.274 11.3771 118.442 12.8226 117.632L19.5663 113.855C21.0118 113.045 22.8342 113.564 23.7086 114.972C24.7238 116.606 25.8096 118.195 26.9631 119.734C27.9565 121.06 27.7782 122.947 26.4985 123.999L20.5283 128.909Z" fill="white" fill-opacity="0.15" /> <path d="M11.961 116.051C10.4969 116.827 8.67584 116.271 7.95554 114.779C6.76567 112.314 5.70308 109.79 4.77196 107.217C4.20828 105.659 5.08374 103.968 6.6618 103.463L14.024 101.108C15.6021 100.603 17.2841 101.475 17.8598 103.029C18.5284 104.833 19.2751 106.607 20.098 108.346C20.8067 109.843 20.2553 111.656 18.7912 112.432L11.961 116.051Z" fill="white" fill-opacity="0.15" /> <path d="M6.1804 101.901C4.592 102.373 2.91652 101.468 2.50514 99.8632C1.82559 97.212 1.28253 94.5276 0.878128 91.8207C0.633316 90.1821 1.82549 88.6975 3.47218 88.5143L11.1546 87.6596C12.8013 87.4764 14.2778 88.6642 14.5353 90.3009C14.8343 92.2013 15.216 94.0878 15.6791 95.955C16.078 97.5631 15.1794 99.2315 13.591 99.7027L6.1804 101.901Z" fill="white" fill-opacity="0.15" /> <path d="M3.29675 86.7537C1.64629 86.899 0.184616 85.6789 0.101273 84.0241C-0.0363922 81.2906 -0.0337067 78.5519 0.109344 75.8187C0.195938 74.1641 1.66 72.9469 3.3102 73.0955L11.0089 73.7886C12.6591 73.9371 13.8692 75.3954 13.7955 77.0506C13.7099 78.9725 13.708 80.8971 13.7898 82.8192C13.8603 84.4745 12.6472 85.9304 10.9968 86.0757L3.29675 86.7537Z" fill="white" fill-opacity="0.15" /> <path d="M3.48219 71.3962C1.83571 71.2111 0.645279 69.7251 0.892014 68.0867C1.29958 65.3803 1.84578 62.6966 2.52843 60.0462C2.94168 58.4417 4.61821 57.5392 6.20609 58.0123L13.614 60.2196C15.2019 60.6927 16.0986 62.3621 15.6978 63.9698C15.2325 65.8364 14.8486 67.7225 14.5474 69.6225C14.2879 71.2589 12.8101 72.445 11.1636 72.2599L3.48219 71.3962Z" fill="white" fill-opacity="0.15" /> <path d="M6.65344 56.5632C5.0752 56.0589 4.19914 54.3685 4.76227 52.8102C5.69247 50.2362 6.75417 47.7116 7.94313 45.2465C8.6629 43.7541 10.4838 43.1978 11.9481 43.973L18.7797 47.5897C20.244 48.3649 20.796 50.1777 20.0879 51.6756C19.2656 53.4148 18.5195 55.189 17.8516 56.9931C17.2764 58.5469 15.5947 59.4203 14.0165 58.916L6.65344 56.5632Z" fill="white" fill-opacity="0.15" /> <path d="M12.5675 42.8266C11.1165 42.0267 10.5838 40.1988 11.4375 38.7788C12.8478 36.4332 14.3775 34.1614 16.0206 31.9726C17.0153 30.6475 18.9093 30.4537 20.1962 31.4974L26.1997 36.3664C27.4866 37.4101 27.6778 39.2954 26.6934 40.6281C25.5505 42.1756 24.4754 43.7721 23.4714 45.4131C22.6067 46.8264 20.7879 47.3582 19.3369 46.5583L12.5675 42.8266Z" fill="white" fill-opacity="0.15" /> <path d="M21.1803 30.3085C19.9147 29.2392 19.7513 27.3423 20.8672 26.1176C22.7106 24.0946 24.6566 22.1675 26.6976 20.3439C27.9331 19.24 29.8284 19.4219 30.8852 20.6979L35.8157 26.6511C36.8725 27.9271 36.6898 29.8133 35.4629 30.9268C34.0383 32.2197 32.6707 33.574 31.364 34.9858C30.2386 36.2018 28.3507 36.3661 27.0851 35.2969L21.1803 30.3085Z" fill="white" fill-opacity="0.15" /> <path d="M32.0159 19.7794C30.9834 18.4836 31.1935 16.5912 32.5271 15.608C34.7301 13.9839 37.0149 12.4739 39.3727 11.084C40.8 10.2425 42.6232 10.7911 43.4106 12.2489L47.0837 19.0502C47.871 20.5081 47.3235 22.3222 45.9027 23.1747C44.2531 24.1645 42.6474 25.2257 41.0901 26.3552C39.7489 27.328 37.8654 27.1206 36.8329 25.8248L32.0159 19.7794Z" fill="white" fill-opacity="0.15" /> <path d="M44.9964 11.4161C44.2432 9.94038 44.8267 8.12801 46.3296 7.43068C48.8124 6.27876 51.3526 5.255 53.9402 4.36345C55.5067 3.82374 57.1839 4.72501 57.6645 6.31063L59.9067 13.7081C60.3873 15.2937 59.4888 16.9621 57.9265 17.514C56.1126 18.1548 54.3274 18.8742 52.5761 19.6703C51.0678 20.356 49.2635 19.7768 48.5103 18.3011L44.9964 11.4161Z" fill="white" fill-opacity="0.15" /> <path d="M59.1654 5.87227C58.7171 4.27722 59.6456 2.61497 61.2563 2.22678C63.9171 1.58552 66.609 1.08123 69.3214 0.715903C70.9635 0.494742 72.4306 1.7082 72.5901 3.35737L73.334 11.0513C73.4934 12.7005 72.2844 14.1597 70.6441 14.3936C68.7396 14.6652 66.8478 15.0196 64.9742 15.4557C63.3605 15.8314 61.7053 14.9088 61.2569 13.3138L59.1654 5.87227Z" fill="white" fill-opacity="0.15" /> <path d="M74.096 3.22668C73.9689 1.5747 75.2052 0.126633 76.8607 0.0616167C79.5956 -0.0457823 82.3341 -0.0127659 85.0656 0.160536C86.7191 0.265447 87.92 1.7429 87.7532 3.39133L86.9749 11.0819C86.8081 12.7303 85.3365 13.9243 83.6822 13.8322C81.7614 13.7253 79.8369 13.7021 77.9141 13.7627C76.258 13.8148 74.8157 12.5857 74.6887 10.9337L74.096 3.22668Z" fill="#EB2F2F" fill-opacity="0.37" /> <path d="M89.1967 3.55119C89.3946 1.9062 90.8897 0.727314 92.5262 0.986739C95.2293 1.41528 97.9087 1.98226 100.554 2.68544C102.155 3.11112 103.044 4.79459 102.559 6.37874L100.294 13.7694C99.809 15.3535 98.1327 16.2373 96.5282 15.824C94.6652 15.3442 92.7822 14.9458 90.8846 14.6298C89.2502 14.3577 88.0756 12.8707 88.2735 11.2257L89.1967 3.55119Z" fill="#EB2F2F" fill-opacity="0.37" /> <path d="M103.973 6.82702C104.489 5.25251 106.186 4.38886 107.74 4.96338C110.307 5.91241 112.824 6.99255 115.28 8.19955C116.767 8.93023 117.31 10.7552 116.524 12.2138L112.858 19.0186C112.072 20.4772 110.255 21.016 108.762 20.2969C107.029 19.4619 105.261 18.7028 103.461 18.0218C101.912 17.4352 101.051 15.7472 101.567 14.1727L103.973 6.82702Z" fill="#EB2F2F" fill-opacity="0.37" /> <path d="M117.931 12.9906C118.747 11.5487 120.581 11.0366 121.991 11.9063C124.321 13.3429 126.575 14.898 128.745 16.5657C130.059 17.5752 130.231 19.4714 129.173 20.7464L124.237 26.6947C123.179 27.9697 121.291 28.1396 119.97 27.1403C118.435 25.98 116.851 24.8871 115.222 23.8647C113.818 22.9841 113.307 21.1594 114.123 19.7175L117.931 12.9906Z" fill="#EB2F2F" fill-opacity="0.37" /> <path d="M130.398 21.7847C131.483 20.5321 133.381 20.3916 134.593 21.5222C136.593 23.3899 138.497 25.3591 140.295 27.4219C141.384 28.6706 141.18 30.5636 139.891 31.6049L133.879 36.4632C132.59 37.5045 130.706 37.299 129.607 36.0587C128.332 34.6187 126.994 33.2348 125.598 31.9111C124.396 30.7711 124.254 28.8814 125.339 27.6288L130.398 21.7847Z" fill="#EB2F2F" fill-opacity="0.37" /> </svg> SVG 2 (colored) <svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M75.8122 156.886C75.7221 158.54 74.3071 159.814 72.6572 159.662C69.9318 159.411 67.2211 159.02 64.5358 158.491C62.9102 158.171 61.9128 156.549 62.2938 154.937L64.0713 147.414C64.4523 145.801 66.0673 144.81 67.6954 145.118C69.5857 145.475 71.4907 145.75 73.4049 145.941C75.0535 146.106 76.3227 147.513 76.2326 149.168L75.8122 156.886Z" fill="white"/> <path d="M59.8939 154.329C59.4612 155.928 57.812 156.879 56.23 156.387C53.6166 155.574 51.0467 154.627 48.5305 153.55C47.0072 152.899 46.3694 151.105 47.0778 149.607L50.3827 142.619C51.0911 141.122 52.8772 140.488 54.4055 141.128C56.18 141.871 57.986 142.537 59.8184 143.122C61.3966 143.627 62.3449 145.268 61.9123 146.867L59.8939 154.329Z" fill="white"/> <path d="M45.0911 148.632C44.3399 150.109 42.5307 150.702 41.0831 149.896C38.6918 148.565 36.3705 147.112 34.1282 145.542C32.7707 144.592 32.514 142.706 33.5143 141.385L38.1809 135.222C39.1811 133.902 41.059 133.648 42.4238 134.587C44.0084 135.678 45.6398 136.699 47.3133 137.648C48.7546 138.465 49.3466 140.266 48.5955 141.742L45.0911 148.632Z" fill="white"/> <path d="M31.755 140.012C30.7168 141.303 28.8244 141.513 27.5729 140.427C25.5056 138.633 23.5317 136.735 21.659 134.739C20.5253 133.53 20.6611 131.631 21.911 130.544L27.7424 125.47C28.9923 124.382 30.8824 124.519 32.0254 125.718C33.3526 127.111 34.7398 128.445 36.183 129.717C37.426 130.813 37.6363 132.696 36.5981 133.987L31.755 140.012Z" fill="white"/> <path d="M20.5283 128.909C19.2486 129.962 17.3532 129.781 16.3495 128.463C14.6916 126.285 13.1464 124.024 11.7202 121.688C10.8568 120.274 11.3771 118.442 12.8226 117.632L19.5663 113.855C21.0118 113.045 22.8342 113.564 23.7086 114.972C24.7238 116.606 25.8096 118.195 26.9631 119.734C27.9565 121.06 27.7782 122.947 26.4985 123.999L20.5283 128.909Z" fill="white"/> <path d="M11.961 116.051C10.4969 116.827 8.67584 116.271 7.95553 114.779C6.76568 112.314 5.70309 109.79 4.77196 107.217C4.20829 105.659 5.08374 103.968 6.6618 103.463L14.024 101.108C15.6021 100.603 17.2841 101.475 17.8598 103.029C18.5284 104.833 19.2751 106.607 20.098 108.346C20.8067 109.843 20.2553 111.656 18.7912 112.432L11.961 116.051Z" fill="white"/> <path d="M6.18041 101.901C4.59199 102.373 2.91653 101.468 2.50514 99.8632C1.82559 97.212 1.28254 94.5276 0.878129 91.8207C0.633314 90.1821 1.82549 88.6975 3.47218 88.5143L11.1546 87.6596C12.8013 87.4764 14.2778 88.6642 14.5353 90.3009C14.8343 92.2013 15.216 94.0878 15.6791 95.955C16.078 97.5631 15.1794 99.2315 13.591 99.7027L6.18041 101.901Z" fill="white"/> <path d="M3.29675 86.7537C1.64628 86.899 0.184616 85.6789 0.101274 84.0241C-0.0363984 81.2906 -0.0337045 78.5519 0.109345 75.8187C0.195942 74.1641 1.66001 72.9469 3.31019 73.0955L11.0089 73.7886C12.6591 73.9371 13.8692 75.3954 13.7955 77.0506C13.7099 78.9724 13.708 80.8971 13.7898 82.8192C13.8603 84.4745 12.6473 85.9304 10.9968 86.0757L3.29675 86.7537Z" fill="white"/> <path d="M3.48219 71.3962C1.83572 71.2111 0.645278 69.7251 0.89201 68.0867C1.29958 65.3803 1.84577 62.6966 2.52843 60.0462C2.94169 58.4417 4.61821 57.5392 6.20608 58.0123L13.6141 60.2196C15.2019 60.6927 16.0986 62.3621 15.6978 63.9698C15.2325 65.8364 14.8486 67.7225 14.5474 69.6225C14.2879 71.2589 12.8101 72.445 11.1636 72.2599L3.48219 71.3962Z" fill="white"/> <path d="M6.65344 56.5632C5.0752 56.0589 4.19915 54.3685 4.76226 52.8102C5.69247 50.2362 6.75416 47.7116 7.94314 45.2465C8.66291 43.7541 10.4838 43.1978 11.9481 43.973L18.7797 47.5897C20.244 48.3649 20.796 50.1777 20.0879 51.6756C19.2656 53.4148 18.5195 55.189 17.8516 56.9931C17.2764 58.5469 15.5947 59.4203 14.0165 58.916L6.65344 56.5632Z" fill="white"/> <path d="M12.5675 42.8266C11.1166 42.0267 10.5838 40.1988 11.4375 38.7788C12.8478 36.4332 14.3775 34.1614 16.0206 31.9726C17.0153 30.6475 18.9093 30.4537 20.1962 31.4974L26.1997 36.3664C27.4866 37.4101 27.6778 39.2954 26.6934 40.6281C25.5505 42.1756 24.4755 43.7721 23.4714 45.4131C22.6067 46.8264 20.7879 47.3582 19.3369 46.5583L12.5675 42.8266Z" fill="white"/> <path d="M21.1803 30.3085C19.9147 29.2392 19.7513 27.3423 20.8672 26.1176C22.7106 24.0946 24.6566 22.1675 26.6976 20.3439C27.9331 19.24 29.8284 19.4219 30.8852 20.6979L35.8157 26.6511C36.8725 27.9271 36.6898 29.8133 35.4629 30.9268C34.0383 32.2197 32.6707 33.574 31.364 34.9858C30.2386 36.2018 28.3507 36.3661 27.0851 35.2969L21.1803 30.3085Z" fill="white"/> <path d="M32.0159 19.7794C30.9834 18.4836 31.1935 16.5912 32.5271 15.608C34.7301 13.9839 37.0149 12.4739 39.3727 11.084C40.8 10.2425 42.6232 10.7911 43.4106 12.2489L47.0837 19.0502C47.871 20.5081 47.3235 22.3222 45.9027 23.1747C44.2531 24.1645 42.6474 25.2257 41.0901 26.3552C39.7489 27.328 37.8654 27.1206 36.8329 25.8248L32.0159 19.7794Z" fill="white"/> <path d="M44.9964 11.4161C44.2432 9.94038 44.8267 8.12801 46.3296 7.43068C48.8124 6.27876 51.3526 5.255 53.9402 4.36345C55.5067 3.82374 57.1839 4.72501 57.6645 6.31063L59.9067 13.7081C60.3873 15.2937 59.4888 16.9621 57.9265 17.514C56.1126 18.1548 54.3274 18.8742 52.5761 19.6703C51.0678 20.356 49.2635 19.7768 48.5103 18.3011L44.9964 11.4161Z" fill="white"/> <path d="M59.1654 5.87227C58.7171 4.27722 59.6456 2.61497 61.2563 2.22678C63.9171 1.58552 66.609 1.08123 69.3214 0.715903C70.9635 0.494742 72.4307 1.7082 72.5901 3.35737L73.334 11.0513C73.4934 12.7005 72.2844 14.1597 70.6441 14.3936C68.7396 14.6652 66.8478 15.0196 64.9742 15.4557C63.3605 15.8314 61.7053 14.9088 61.2569 13.3138L59.1654 5.87227Z" fill="white"/> <path d="M74.096 3.22668C73.969 1.5747 75.2052 0.126633 76.8608 0.0616167C79.5956 -0.0457823 82.3341 -0.0127659 85.0656 0.160536C86.7191 0.265447 87.92 1.7429 87.7532 3.39133L86.9749 11.0819C86.8081 12.7303 85.3365 13.9243 83.6822 13.8322C81.7614 13.7253 79.8369 13.7021 77.9141 13.7627C76.258 13.8148 74.8157 12.5857 74.6887 10.9337L74.096 3.22668Z" fill="#EB2F2F"/> <path d="M89.1967 3.55119C89.3946 1.9062 90.8897 0.727313 92.5262 0.986739C95.2293 1.41528 97.9087 1.98226 100.554 2.68544C102.155 3.11112 103.044 4.79459 102.559 6.37874L100.294 13.7694C99.809 15.3535 98.1327 16.2373 96.5282 15.824C94.6652 15.3442 92.7822 14.9458 90.8846 14.6298C89.2502 14.3577 88.0756 12.8707 88.2735 11.2257L89.1967 3.55119Z" fill="#EB2F2F"/> <path d="M103.973 6.82702C104.489 5.25251 106.186 4.38886 107.74 4.96338C110.307 5.91241 112.824 6.99255 115.28 8.19955C116.767 8.93023 117.31 10.7552 116.524 12.2138L112.858 19.0186C112.072 20.4772 110.255 21.016 108.762 20.2969C107.029 19.4619 105.261 18.7028 103.461 18.0218C101.912 17.4352 101.051 15.7472 101.567 14.1727L103.973 6.82702Z" fill="#EB2F2F"/> <path d="M117.931 12.9906C118.747 11.5487 120.581 11.0366 121.991 11.9063C124.321 13.3429 126.575 14.898 128.745 16.5657C130.059 17.5752 130.231 19.4714 129.173 20.7464L124.237 26.6947C123.179 27.9697 121.291 28.1396 119.97 27.1403C118.435 25.98 116.851 24.8871 115.222 23.8647C113.818 22.9841 113.307 21.1594 114.123 19.7175L117.931 12.9906Z" fill="#EB2F2F"/> <path d="M130.398 21.7847C131.483 20.5321 133.381 20.3916 134.593 21.5222C136.593 23.3899 138.497 25.3591 140.295 27.4219C141.384 28.6706 141.18 30.5636 139.891 31.6049L133.879 36.4632C132.59 37.5045 130.706 37.299 129.607 36.0587C128.332 34.6187 126.994 33.2348 125.598 31.9111C124.396 30.7711 124.254 28.8814 125.339 27.6288L130.398 21.7847Z" fill="#EB2F2F"/>
All that needs to happen is for the relevant number of blobs (paths in the SVG) to be set to opacity 1.
There are 20 blobs in all so each represents 5%.
To show 40% you want the first 40/5 = 8 to have their fill-opacity set to 1. This can be done with CSS.
Here's a little example of 40% using JS just to set the fill-opacities. They could just be set by hand in the SVG of course:
<body style="background: gray;">
<svg class="rpm-svg center" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
<path
d="M75.8122 156.886C75.7221 158.54 74.3071 159.814 72.6572 159.662C69.9318 159.411 67.2211 159.02 64.5358 158.491C62.9102 158.171 61.9128 156.549 62.2938 154.937L64.0713 147.414C64.4523 145.801 66.0673 144.81 67.6954 145.118C69.5857 145.475 71.4907 145.75 73.4049 145.941C75.0535 146.106 76.3227 147.513 76.2326 149.168L75.8122 156.886Z"
fill=""white
fill-opacity="0.15"
/>
<path
d="M59.8939 154.329C59.4612 155.928 57.812 156.879 56.23 156.387C53.6166 155.574 51.0467 154.627 48.5304 153.55C47.0072 152.899 46.3694 151.105 47.0778 149.607L50.3827 142.619C51.0911 141.122 52.8772 140.488 54.4055 141.128C56.18 141.871 57.986 142.537 59.8184 143.122C61.3966 143.627 62.3449 145.268 61.9123 146.867L59.8939 154.329Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M45.0911 148.632C44.3399 150.109 42.5307 150.702 41.0831 149.896C38.6918 148.565 36.3705 147.112 34.1282 145.542C32.7707 144.592 32.514 142.706 33.5143 141.385L38.1809 135.222C39.1811 133.902 41.059 133.648 42.4238 134.587C44.0084 135.678 45.6398 136.699 47.3133 137.648C48.7546 138.465 49.3466 140.266 48.5955 141.742L45.0911 148.632Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M31.755 140.012C30.7168 141.303 28.8244 141.513 27.5729 140.427C25.5056 138.633 23.5317 136.735 21.659 134.739C20.5253 133.53 20.6611 131.631 21.911 130.544L27.7424 125.47C28.9923 124.382 30.8824 124.519 32.0254 125.718C33.3526 127.111 34.7398 128.445 36.183 129.717C37.426 130.813 37.6363 132.696 36.5981 133.987L31.755 140.012Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M20.5283 128.909C19.2486 129.962 17.3532 129.781 16.3495 128.463C14.6916 126.285 13.1464 124.024 11.7202 121.688C10.8568 120.274 11.3771 118.442 12.8226 117.632L19.5663 113.855C21.0118 113.045 22.8342 113.564 23.7086 114.972C24.7238 116.606 25.8096 118.195 26.9631 119.734C27.9565 121.06 27.7782 122.947 26.4985 123.999L20.5283 128.909Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M11.961 116.051C10.4969 116.827 8.67584 116.271 7.95554 114.779C6.76567 112.314 5.70308 109.79 4.77196 107.217C4.20828 105.659 5.08374 103.968 6.6618 103.463L14.024 101.108C15.6021 100.603 17.2841 101.475 17.8598 103.029C18.5284 104.833 19.2751 106.607 20.098 108.346C20.8067 109.843 20.2553 111.656 18.7912 112.432L11.961 116.051Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M6.1804 101.901C4.592 102.373 2.91652 101.468 2.50514 99.8632C1.82559 97.212 1.28253 94.5276 0.878128 91.8207C0.633316 90.1821 1.82549 88.6975 3.47218 88.5143L11.1546 87.6596C12.8013 87.4764 14.2778 88.6642 14.5353 90.3009C14.8343 92.2013 15.216 94.0878 15.6791 95.955C16.078 97.5631 15.1794 99.2315 13.591 99.7027L6.1804 101.901Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M3.29675 86.7537C1.64629 86.899 0.184616 85.6789 0.101273 84.0241C-0.0363922 81.2906 -0.0337067 78.5519 0.109344 75.8187C0.195938 74.1641 1.66 72.9469 3.3102 73.0955L11.0089 73.7886C12.6591 73.9371 13.8692 75.3954 13.7955 77.0506C13.7099 78.9725 13.708 80.8971 13.7898 82.8192C13.8603 84.4745 12.6472 85.9304 10.9968 86.0757L3.29675 86.7537Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M3.48219 71.3962C1.83571 71.2111 0.645279 69.7251 0.892014 68.0867C1.29958 65.3803 1.84578 62.6966 2.52843 60.0462C2.94168 58.4417 4.61821 57.5392 6.20609 58.0123L13.614 60.2196C15.2019 60.6927 16.0986 62.3621 15.6978 63.9698C15.2325 65.8364 14.8486 67.7225 14.5474 69.6225C14.2879 71.2589 12.8101 72.445 11.1636 72.2599L3.48219 71.3962Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M6.65344 56.5632C5.0752 56.0589 4.19914 54.3685 4.76227 52.8102C5.69247 50.2362 6.75417 47.7116 7.94313 45.2465C8.6629 43.7541 10.4838 43.1978 11.9481 43.973L18.7797 47.5897C20.244 48.3649 20.796 50.1777 20.0879 51.6756C19.2656 53.4148 18.5195 55.189 17.8516 56.9931C17.2764 58.5469 15.5947 59.4203 14.0165 58.916L6.65344 56.5632Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M12.5675 42.8266C11.1165 42.0267 10.5838 40.1988 11.4375 38.7788C12.8478 36.4332 14.3775 34.1614 16.0206 31.9726C17.0153 30.6475 18.9093 30.4537 20.1962 31.4974L26.1997 36.3664C27.4866 37.4101 27.6778 39.2954 26.6934 40.6281C25.5505 42.1756 24.4754 43.7721 23.4714 45.4131C22.6067 46.8264 20.7879 47.3582 19.3369 46.5583L12.5675 42.8266Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M21.1803 30.3085C19.9147 29.2392 19.7513 27.3423 20.8672 26.1176C22.7106 24.0946 24.6566 22.1675 26.6976 20.3439C27.9331 19.24 29.8284 19.4219 30.8852 20.6979L35.8157 26.6511C36.8725 27.9271 36.6898 29.8133 35.4629 30.9268C34.0383 32.2197 32.6707 33.574 31.364 34.9858C30.2386 36.2018 28.3507 36.3661 27.0851 35.2969L21.1803 30.3085Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M32.0159 19.7794C30.9834 18.4836 31.1935 16.5912 32.5271 15.608C34.7301 13.9839 37.0149 12.4739 39.3727 11.084C40.8 10.2425 42.6232 10.7911 43.4106 12.2489L47.0837 19.0502C47.871 20.5081 47.3235 22.3222 45.9027 23.1747C44.2531 24.1645 42.6474 25.2257 41.0901 26.3552C39.7489 27.328 37.8654 27.1206 36.8329 25.8248L32.0159 19.7794Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M44.9964 11.4161C44.2432 9.94038 44.8267 8.12801 46.3296 7.43068C48.8124 6.27876 51.3526 5.255 53.9402 4.36345C55.5067 3.82374 57.1839 4.72501 57.6645 6.31063L59.9067 13.7081C60.3873 15.2937 59.4888 16.9621 57.9265 17.514C56.1126 18.1548 54.3274 18.8742 52.5761 19.6703C51.0678 20.356 49.2635 19.7768 48.5103 18.3011L44.9964 11.4161Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M59.1654 5.87227C58.7171 4.27722 59.6456 2.61497 61.2563 2.22678C63.9171 1.58552 66.609 1.08123 69.3214 0.715903C70.9635 0.494742 72.4306 1.7082 72.5901 3.35737L73.334 11.0513C73.4934 12.7005 72.2844 14.1597 70.6441 14.3936C68.7396 14.6652 66.8478 15.0196 64.9742 15.4557C63.3605 15.8314 61.7053 14.9088 61.2569 13.3138L59.1654 5.87227Z"
fill="white"
fill-opacity="0.15"
/>
<path
d="M74.096 3.22668C73.9689 1.5747 75.2052 0.126633 76.8607 0.0616167C79.5956 -0.0457823 82.3341 -0.0127659 85.0656 0.160536C86.7191 0.265447 87.92 1.7429 87.7532 3.39133L86.9749 11.0819C86.8081 12.7303 85.3365 13.9243 83.6822 13.8322C81.7614 13.7253 79.8369 13.7021 77.9141 13.7627C76.258 13.8148 74.8157 12.5857 74.6887 10.9337L74.096 3.22668Z"
fill="#EB2F2F"
fill-opacity="0.37"
/>
<path
d="M89.1967 3.55119C89.3946 1.9062 90.8897 0.727314 92.5262 0.986739C95.2293 1.41528 97.9087 1.98226 100.554 2.68544C102.155 3.11112 103.044 4.79459 102.559 6.37874L100.294 13.7694C99.809 15.3535 98.1327 16.2373 96.5282 15.824C94.6652 15.3442 92.7822 14.9458 90.8846 14.6298C89.2502 14.3577 88.0756 12.8707 88.2735 11.2257L89.1967 3.55119Z"
fill="#EB2F2F"
fill-opacity="0.37"
/>
<path
d="M103.973 6.82702C104.489 5.25251 106.186 4.38886 107.74 4.96338C110.307 5.91241 112.824 6.99255 115.28 8.19955C116.767 8.93023 117.31 10.7552 116.524 12.2138L112.858 19.0186C112.072 20.4772 110.255 21.016 108.762 20.2969C107.029 19.4619 105.261 18.7028 103.461 18.0218C101.912 17.4352 101.051 15.7472 101.567 14.1727L103.973 6.82702Z"
fill="#EB2F2F"
fill-opacity="0.37"
/>
<path
d="M117.931 12.9906C118.747 11.5487 120.581 11.0366 121.991 11.9063C124.321 13.3429 126.575 14.898 128.745 16.5657C130.059 17.5752 130.231 19.4714 129.173 20.7464L124.237 26.6947C123.179 27.9697 121.291 28.1396 119.97 27.1403C118.435 25.98 116.851 24.8871 115.222 23.8647C113.818 22.9841 113.307 21.1594 114.123 19.7175L117.931 12.9906Z"
fill="#EB2F2F"
fill-opacity="0.37"
/>
<path
d="M130.398 21.7847C131.483 20.5321 133.381 20.3916 134.593 21.5222C136.593 23.3899 138.497 25.3591 140.295 27.4219C141.384 28.6706 141.18 30.5636 139.891 31.6049L133.879 36.4632C132.59 37.5045 130.706 37.299 129.607 36.0587C128.332 34.6187 126.994 33.2348 125.598 31.9111C124.396 30.7711 124.254 28.8814 125.339 27.6288L130.398 21.7847Z"
fill="#EB2F2F"
fill-opacity="0.37"
/>
</svg>
</body>
<script>
const svg = document.querySelector('svg');
const blobs = svg.querySelectorAll('path');
function show(pc) {
const num = Math.floor(pc / 5);
for (let i = 0; i < num; i++) {
blobs[i].style.fillOpacity = "1";
}
}
show(40);
</script>
In this example I create a mask with all the "dots" and then apply it to a group <g> that has circles in different colors. All circles have a pathLength and dasharray so that the length of the circle can be controlled. The each have the colors gray and red (with opacity .25) and white and red.
Another mask has a circle where the length of the circle is controlled by the JavaScript. This mask is use on the white and the red circle.
I chose to construct the bar because it is easier to edit -- and more fun to create.
document.forms.form01.range.addEventListener('change', e => {
const c1 = document.getElementById('c1');
let length = parseInt(e.target.value) * 2.2;
c1.setAttribute('stroke-dasharray', `${length} 360`);
});
body {
background: gray;
}
<form name="form01">
<input name="range" type="range" value="50" min="0" max="100" />
</form>
<svg width="300" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="dots">
<g transform="translate(80 80)">
<g id="dot">
<circle cx="0" cy="0" r="70" stroke="white" stroke-width="10"
fill="none" pathLength="360" stroke-dasharray="6 360" transform="rotate(90)" />
<rect transform="rotate(0) translate(-2 65)" width="4" height="10"
rx="2" fill="white" />
<rect transform="rotate(6) translate(-2 65)" width="4" height="10"
rx="2" fill="white" />
</g>
<use href="#dot" transform="rotate(11)" />
<use href="#dot" transform="rotate(22)" />
<use href="#dot" transform="rotate(33)" />
<use href="#dot" transform="rotate(44)" />
<use href="#dot" transform="rotate(55)" />
<use href="#dot" transform="rotate(66)" />
<use href="#dot" transform="rotate(77)" />
<use href="#dot" transform="rotate(88)" />
<use href="#dot" transform="rotate(99)" />
<use href="#dot" transform="rotate(110)" />
<use href="#dot" transform="rotate(121)" />
<use href="#dot" transform="rotate(132)" />
<use href="#dot" transform="rotate(143)" />
<use href="#dot" transform="rotate(154)" />
<use href="#dot" transform="rotate(165)" />
<use href="#dot" transform="rotate(176)" />
<use href="#dot" transform="rotate(187)" />
<use href="#dot" transform="rotate(198)" />
<use href="#dot" transform="rotate(209)" />
</g>
</mask>
<mask id="bar">
<circle id="c1" cx="80" cy="80" r="70" stroke="white" stroke-width="22" fill="none"
pathLength="360" stroke-dasharray="110 360" />
</mask>
</defs>
<g mask="url(#dots)" >
<g transform="rotate(88 80 80)">
<circle cx="80" cy="80" r="70" stroke="#444" stroke-width="20"
fill="none" pathLength="360" stroke-dasharray="132 360" opacity=".25" />
<circle cx="80" cy="80" r="70" stroke="red" stroke-width="20"
fill="none" pathLength="360" stroke-dasharray="220 360"
transform="rotate(132 80 80)" opacity=".25" />
<g mask="url(#bar)">
<circle cx="80" cy="80" r="70" stroke="white" stroke-width="20" fill="none"
pathLength="360" stroke-dasharray="132 360" />
<circle cx="80" cy="80" r="70" stroke="red" stroke-width="20" fill="none"
pathLength="360" stroke-dasharray="110 360" transform="rotate(132 80 80)" />
</g>
</g>
</g>
</svg>
SVG element aligns center in Chrome browser but it should align to the right
I have svg elements that is positioned to the right. This alignment works fine in Firefox but when I open my webpage in Chrome browser the SVG element is positioned at the center of a section. <html> <svg style="position:absolute;right:0;" width="auto" height="120%" viewBox="0 0 116 253" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0)"> <path d="M59.1636 98.0787C48.2396 99.6774 44.5051 100.519 34.7033 106.062C24.9015 111.606 16.8079 119.731 11.3034 129.555C5.7989 139.379 3.0943 150.524 3.48398 161.778C3.87366 173.032 7.34269 183.963 13.5135 193.383C19.6844 202.802 28.3206 210.348 38.4823 215.201C48.6441 220.053 59.942 222.025 71.1466 220.902C82.3512 219.779 92.3976 216.622 101.394 209.85C110.391 203.078 111.786 201.191 118.313 188.935L119.315 181.351C115.345 191.285 108.726 199.94 100.179 206.373C91.6319 212.806 81.791 218.109 71.1466 219.176C60.5022 220.243 48.136 218.723 38.4823 214.113C28.8287 209.504 20.264 202.331 14.4017 193.383C8.53939 184.434 4.78037 172.469 4.41017 161.778C4.03997 151.087 6.07412 142.581 11.3034 133.249C16.5327 123.916 26.9068 114.008 36.2185 108.742C45.5303 103.475 56.108 100.864 66.8007 101.192L59.1636 98.0787Z" fill="#C4C4C4" fill-opacity="0.5"/> <path d="M63.4178 41.2475C56.6489 43.02 50.6873 47.0487 46.518 52.668C42.3487 58.2872 40.2213 65.1608 40.4874 72.1528C40.7534 79.1448 43.3969 85.8369 47.9811 91.1231C52.5653 96.4094 59.3403 99.8898 66.2243 101.143L59.2968 98.2119C53.8348 95.0146 53.1124 94.5766 48.9866 89.819C44.8608 85.0614 42.4841 78.4456 42.2447 72.1528C42.0052 65.86 42.7656 59.573 46.518 54.5157C50.2703 49.4583 55.0699 45.7197 61.1619 44.1245L63.4178 41.2475Z" fill="#C4C4C4" fill-opacity="0.5"/> <path d="M12.7873 92.5315C19.5273 100.432 23.0393 106.482 26.5414 114.654C25.2887 104.9 25.0264 97.7404 25.1272 92.7738C25.1724 90.5464 25.2907 88.7598 25.4254 87.3778C23.8135 89.2058 22.4806 90.2382 20.832 90.8877C19.681 91.3412 18.4161 91.5927 16.8924 91.8482C16.4992 91.9141 16.0869 91.9806 15.6507 92.0509C14.7991 92.1882 13.8564 92.3401 12.7873 92.5315Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/> <path d="M33.2938 68.7639C30.4436 64.512 28.6665 61.1848 26.1622 55.2208C23.7429 61.1064 22.0473 64.4274 19.3202 68.8562C22.1626 73.9448 23.8536 77.4954 26.0165 83.0088C26.9853 79.7262 27.7752 77.424 28.7285 75.4494C29.8636 73.0982 31.2145 71.2427 33.2938 68.7639Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/> </g> <defs> <clipPath id="clip0"> <rect width="116" height="253" fill="white" transform="matrix(-1 0 0 1 116 0)"/> </clipPath> </defs> </svg> </html>
Try using this preserveAspectRatio="xMaxYMin meet" <svg style="position:absolute;right:0;" width="auto" height="100%" viewBox="0 0 116 253" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMin meet"> <g clip-path="url(#clip0)"> <path d="M59.1636 98.0787C48.2396 99.6774 44.5051 100.519 34.7033 106.062C24.9015 111.606 16.8079 119.731 11.3034 129.555C5.7989 139.379 3.0943 150.524 3.48398 161.778C3.87366 173.032 7.34269 183.963 13.5135 193.383C19.6844 202.802 28.3206 210.348 38.4823 215.201C48.6441 220.053 59.942 222.025 71.1466 220.902C82.3512 219.779 92.3976 216.622 101.394 209.85C110.391 203.078 111.786 201.191 118.313 188.935L119.315 181.351C115.345 191.285 108.726 199.94 100.179 206.373C91.6319 212.806 81.791 218.109 71.1466 219.176C60.5022 220.243 48.136 218.723 38.4823 214.113C28.8287 209.504 20.264 202.331 14.4017 193.383C8.53939 184.434 4.78037 172.469 4.41017 161.778C4.03997 151.087 6.07412 142.581 11.3034 133.249C16.5327 123.916 26.9068 114.008 36.2185 108.742C45.5303 103.475 56.108 100.864 66.8007 101.192L59.1636 98.0787Z" fill="#C4C4C4" fill-opacity="0.5"/> <path d="M63.4178 41.2475C56.6489 43.02 50.6873 47.0487 46.518 52.668C42.3487 58.2872 40.2213 65.1608 40.4874 72.1528C40.7534 79.1448 43.3969 85.8369 47.9811 91.1231C52.5653 96.4094 59.3403 99.8898 66.2243 101.143L59.2968 98.2119C53.8348 95.0146 53.1124 94.5766 48.9866 89.819C44.8608 85.0614 42.4841 78.4456 42.2447 72.1528C42.0052 65.86 42.7656 59.573 46.518 54.5157C50.2703 49.4583 55.0699 45.7197 61.1619 44.1245L63.4178 41.2475Z" fill="#C4C4C4" fill-opacity="0.5"/> <path d="M12.7873 92.5315C19.5273 100.432 23.0393 106.482 26.5414 114.654C25.2887 104.9 25.0264 97.7404 25.1272 92.7738C25.1724 90.5464 25.2907 88.7598 25.4254 87.3778C23.8135 89.2058 22.4806 90.2382 20.832 90.8877C19.681 91.3412 18.4161 91.5927 16.8924 91.8482C16.4992 91.9141 16.0869 91.9806 15.6507 92.0509C14.7991 92.1882 13.8564 92.3401 12.7873 92.5315Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/> <path d="M33.2938 68.7639C30.4436 64.512 28.6665 61.1848 26.1622 55.2208C23.7429 61.1064 22.0473 64.4274 19.3202 68.8562C22.1626 73.9448 23.8536 77.4954 26.0165 83.0088C26.9853 79.7262 27.7752 77.424 28.7285 75.4494C29.8636 73.0982 31.2145 71.2427 33.2938 68.7639Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/> </g> <defs> <clipPath id="clip0"> <rect width="116" height="253" fill="white" transform="matrix(-1 0 0 1 116 0)"/> </clipPath> </defs> </svg>
SVGs are all rendering identical on rails
I'm trying to make a shared partial to render 3 SVG images, but when it goes to the browser it all looks like the 1st one. Here's the code created: <a href=""> <svg width="76" height="76" viewBox="0 0 76 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>GitHub</title> <g id="Canvas" transform="translate(1493 741)"> <g id="Vector"> <use xlink:href="#path0_fill" transform="translate(-1493 -740.815)" fill="#2B34E3"/> </g> </g> <defs> <path id="path0_fill" fill-rule="evenodd" d="M 22.1444 38.5311C 22.0763 38.5311 22.8917 40.2542 22.9144 40.2542C 24.6943 43.4256 28.1252 45.3971 33.9128 45.9441C 33.0873 46.5592 32.0951 47.7265 31.9575 49.0752C 30.9186 49.7345 28.8295 49.9525 27.2062 49.4496C 24.9303 48.745 24.0593 44.3244 20.6524 44.9546C 19.9152 45.0895 20.0616 45.5672 20.6991 45.9744C 21.738 46.6336 22.715 47.4592 23.4686 49.2151C 24.048 50.5639 25.2648 52.9727 29.1148 52.9727C 30.6422 52.9727 31.7126 52.7924 31.7126 52.7924C 31.7126 52.7924 31.7417 56.2349 31.7417 57.5735C 31.7417 59.1176 29.6185 59.5525 29.6185 60.295C 29.6185 60.5887 30.3216 60.6164 30.8858 60.6164C 32.0017 60.6164 34.323 59.7025 34.323 58.0979C 34.323 56.8235 34.3445 52.5391 34.3445 51.7878C 34.3445 50.1492 35.2395 49.6298 35.2395 49.6298C 35.2395 49.6298 35.3505 58.3777 35.0261 59.5525C 34.6449 60.9315 33.957 60.7361 33.957 61.3513C 33.957 62.2664 36.7517 61.5769 37.6782 59.5664C 38.3939 58.0046 38.0809 49.4193 38.0809 49.4193L 38.8446 49.4042C 38.8446 49.4042 38.8875 53.3332 38.861 55.1294C 38.8345 56.9899 38.7057 59.342 39.8317 60.4513C 40.5714 61.1811 42.9672 62.4605 42.9672 61.2908C 42.9672 60.6113 41.6544 60.0529 41.6544 58.2139L 41.6544 49.7496C 42.7034 49.7496 42.5456 52.5328 42.5456 52.5328L 42.6226 57.7046C 42.6226 57.7046 42.3904 59.5878 44.6991 60.3756C 45.5133 60.6567 47.2552 60.7324 47.3373 60.2622C 47.4193 59.792 45.2394 59.0924 45.2192 57.6353C 45.2065 56.7441 45.2596 56.2248 45.2596 52.3576C 45.2596 48.4903 44.7307 47.0609 42.8864 45.9214C 48.5769 45.3479 52.0999 43.9664 53.8154 40.2668C 53.9492 40.2706 54.516 38.5387 54.4415 38.5387C 54.8265 37.142 55.0348 35.4895 55.0752 33.5332C 55.0651 28.2265 52.4774 26.3496 51.9813 25.4685C 52.7134 21.4513 51.8576 19.6235 51.4612 18.9958C 49.9944 18.484 46.3603 20.313 44.3734 21.6013C 41.1369 20.6723 34.2927 20.7618 31.7265 21.8408C 26.9916 18.5143 24.486 19.0235 24.486 19.0235C 24.486 19.0235 22.8665 21.871 24.0581 26.0382C 22.5004 27.987 21.3391 29.366 21.3391 33.0202C 21.3403 35.0798 21.5878 36.9227 22.1444 38.5311ZM 0 0L 75.7377 0L 75.7377 75.6303L 0 75.6303L 0 0Z"/> </defs> </svg> </a> <a href=""> <svg width="76" height="76" viewBox="0 0 76 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Twitter</title> <g id="Canvas" transform="translate(1493 629)"> <g id="Vector"> <use xlink:href="#path0_fill" transform="translate(-1493 -628.63)" fill="#2B34E3"/> </g> </g> <defs> <path id="path0_fill" fill-rule="evenodd" d="M 43.1288 23.0458C 39.8229 24.2471 37.7338 27.3454 37.9711 30.7361L 38.0506 32.0445L 36.7277 31.8845C 31.9146 31.2706 27.7086 29.1882 24.1376 25.6891L 22.3918 23.9534L 21.9425 25.2353C 20.9907 28.0929 21.5991 31.1105 23.5822 33.1399C 24.64 34.2618 24.4014 34.4219 22.5774 33.7538C 21.9425 33.5408 21.3871 33.3807 21.334 33.4601C 21.1497 33.6479 21.7834 36.0769 22.2858 37.0387C 22.9738 38.3748 24.3749 39.6819 25.9099 40.4571L 27.2062 41.071L 25.6725 41.0975C 24.1919 41.0975 24.1389 41.1239 24.2979 41.6861C 24.8268 43.4218 26.9159 45.2647 29.2436 46.0664L 30.8833 46.6261L 29.4556 47.4807C 27.34 48.7109 24.8533 49.4042 22.3666 49.4559C 21.175 49.4824 20.1967 49.5895 20.1967 49.6702C 20.1967 49.9361 23.4244 51.4311 25.3014 52.0198C 30.935 53.7555 37.6277 53.0067 42.6529 50.0433C 46.224 47.9332 49.7937 43.7408 51.4612 39.6807C 52.3612 37.5189 53.26 33.566 53.26 31.6714C 53.26 30.4424 53.3395 30.2824 54.8202 28.8139C 55.6937 27.9592 56.5129 27.0252 56.672 26.758C 56.937 26.25 56.9093 26.25 55.5611 26.7038C 53.313 27.5055 52.9949 27.3983 54.107 26.1971C 54.9262 25.3424 55.9058 23.7933 55.9058 23.3395C 55.9058 23.2601 55.5094 23.3924 55.0588 23.6332C 54.5829 23.9004 53.5251 24.3013 52.7311 24.5408L 51.3034 24.9958L 50.007 24.1134C 49.2926 23.6332 48.2891 23.0987 47.7589 22.9387C 46.4095 22.5655 44.3457 22.6185 43.1288 23.0458ZM 0 0L 75.7377 0L 75.7377 75.6303L 0 75.6303L 0 0Z"/> </defs> </svg> </a> <a href=""> <svg width="76" height="76" viewBox="0 0 76 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Instagram</title> <g id="Canvas" transform="translate(1493 853)"> <g id="instagram"> <use xlink:href="#path0_fill" transform="translate(-1493 -853)" fill="#2B34E3"/> </g> </g> <defs> <path id="path0_fill" fill-rule="evenodd" d="M 75.7377 0L 0 0L 0 75.6302L 75.7377 75.6302L 75.7377 0ZM 53.6281 22.0783C 54.6815 23.1304 55.3254 24.1824 55.8082 25.4244C 56.2765 26.6226 56.5984 27.9961 56.6862 30.0125C 56.7887 32.0289 56.8032 32.6718 56.8032 37.8152C 56.8032 42.9297 56.7743 43.594 56.6876 45.5841L 56.6875 45.587L 56.6862 45.6178C 56.5984 47.6196 56.2765 49.0078 55.8082 50.2059C 55.3254 51.4479 54.6815 52.4999 53.6281 53.552C 52.5745 54.604 51.521 55.2469 50.2772 55.7291C 49.0774 56.1967 47.7019 56.5182 45.6826 56.6058C 43.6633 56.7081 43.0195 56.7227 37.8689 56.7227C 32.7489 56.7227 32.0823 56.6938 30.0911 56.6074L 30.0897 56.6074L 30.0552 56.6058C 28.0505 56.5182 26.6604 56.1967 25.4606 55.7291C 24.2168 55.2469 23.1632 54.604 22.1097 53.552C 21.0562 52.4999 20.4124 51.4479 19.9294 50.2059C 19.4612 49.0078 19.1393 47.6342 19.0515 45.6178C 18.9491 43.6014 18.9344 42.9585 18.9344 37.8152C 18.9344 32.7018 18.9634 32.0366 19.0499 30.0476L 19.0515 30.0125C 19.1393 28.0107 19.4612 26.6226 19.9294 25.4244C 20.4124 24.1824 21.0562 23.1304 22.1097 22.0783C 23.1632 21.0263 24.2168 20.3834 25.4606 19.9012C 26.6604 19.4336 28.0359 19.1122 30.0552 19.0245C 32.0745 18.9222 32.7183 18.9076 37.8689 18.9076C 42.9889 18.9076 43.6555 18.9365 45.6467 19.0229L 45.6481 19.0229L 45.6826 19.0245C 47.6873 19.1122 49.0774 19.4336 50.2772 19.9012C 51.521 20.3834 52.5745 21.0263 53.6281 22.0783ZM 52.6184 48.9639C 52.8818 48.3064 53.1891 47.2982 53.2769 45.4571L 53.2794 45.3996C 53.3652 43.4576 53.3939 42.8073 53.3939 37.8152C 53.3939 32.8447 53.3654 32.1927 53.2805 30.2565L 53.2805 30.2554L 53.2804 30.2534L 53.2769 30.1732C 53.1891 28.3322 52.8818 27.3386 52.6184 26.6664C 52.2672 25.7751 51.8575 25.1468 51.1991 24.4893C 50.5405 23.8317 49.8967 23.408 49.0188 23.072C 48.3604 22.8089 47.3507 22.5021 45.507 22.4144C 43.517 22.3121 42.9025 22.2975 37.8542 22.2975C 32.873 22.2975 32.2228 22.3259 30.2805 22.4109L 30.2014 22.4144C 28.3578 22.5021 27.3628 22.8089 26.6897 23.072C 25.7971 23.4226 25.1678 23.8317 24.5094 24.4893C 23.851 25.1468 23.4266 25.7897 23.0901 26.6664C 22.8267 27.324 22.5194 28.3322 22.4316 30.1732C 22.3292 32.1604 22.3146 32.7741 22.3146 37.8152C 22.3146 42.7856 22.3431 43.4376 22.428 45.3738L 22.428 45.3749L 22.4281 45.377L 22.4316 45.4571C 22.5194 47.2982 22.8267 48.2917 23.0901 48.9639C 23.4413 49.8552 23.851 50.4835 24.5094 51.1411C 25.1678 51.7986 25.8118 52.2223 26.6897 52.5584C 27.3481 52.8214 28.3578 53.1282 30.2014 53.2159C 32.1914 53.3182 32.7914 53.3328 37.8542 53.3328C 42.8359 53.3328 43.4824 53.3045 45.4115 53.22L 45.507 53.2159C 47.3507 53.1282 48.3457 52.8214 49.0188 52.5584C 49.9114 52.2077 50.5405 51.7986 51.1991 51.1411C 51.8575 50.4835 52.2819 49.8406 52.6184 48.9639ZM 28.1237 37.8151C 28.1237 32.4526 32.4841 28.0983 37.8542 28.0983C 43.2244 28.0983 47.5848 32.4526 47.5848 37.8151C 47.5848 43.1776 43.2244 47.5319 37.8542 47.5319C 32.4841 47.5319 28.1237 43.1776 28.1237 37.8151ZM 31.5331 37.8151C 31.5331 41.3073 34.3717 44.1273 37.8542 44.1273C 41.3368 44.1273 44.1755 41.2927 44.1755 37.8151C 44.1755 34.3229 41.3514 31.5028 37.8542 31.5028C 34.3571 31.5028 31.5331 34.3375 31.5331 37.8151ZM 47.9652 29.9832C 49.2178 29.9832 50.2332 28.9692 50.2332 27.7184C 50.2332 26.4675 49.2178 25.4536 47.9652 25.4536C 46.7125 25.4536 45.6971 26.4675 45.6971 27.7184C 45.6971 28.9692 46.7125 29.9832 47.9652 29.9832Z"/> </defs> </svg> </a> As you can see all the SVGs are different, but when they are rendered they look like this: Identical SVGs rendering
You must change the id to a unique name and properly reference it into xlink:href <use xlink:href="#path1_fill" ... <path id="path1_fill" fill-rule=... <use xlink:href="#path2_fill" ... <path id="path2_fill" fill-rule=... https://jsfiddle.net/42qq7wLu/
SVG logo too small
I can't find out why my logo is too small. This is a problem with the SVG, it's too small comparing with others svg logo that I've used. You can see the picture bellow.
Do you see the small blue point at the top-left of the menu? Well that is the logo. There is no problem with CSS because I've tried another logo (chrome logo to be specific) and it looks good.
Here you have the svg code.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 29700 21000"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#0496ff}
.fil1 {fill:#F8F8FD}
.fil2 {fill:#3245AA;fill-rule:nonzero}
]]>
</style>
</defs>
<g id="Capa_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<circle class="fil0" cx="15466" cy="8645" r="2938"/>
<path class="fil1" d="M15129 6849c-554,-184 -1785,23 -2016,623 -279,725 -52,2348 503,3094 25,21 39,32 69,53 322,173 424,199 822,227 2510,173 2220,-3465 622,-3997zm-1567 953c-52,609 117,1701 283,2287 78,219 -19,139 346,196 213,34 411,-8 601,-101 392,-195 420,-935 360,-1302 -145,-896 -479,-1383 -1386,-1149 -42,11 -165,40 -204,69z"/>
<path class="fil0" d="M17743 6335c123,134 209,259 315,405 185,270 298,510 402,824 967,2926 -1638,4620 -3839,4213 -1228,-227 -2335,-1165 -2614,-2769 -48,-271 -45,-861 21,-1094l25 -117c7,-45 29,-95 22,-125 -46,79 -64,141 -87,245 -186,823 -129,1483 170,2237 11,28 22,56 34,84 246,571 650,1021 1121,1427 1418,1190 3695,866 4916,-412 2143,-2243 577,-5662 -2367,-6048 -338,-44 -708,-14 -1043,47l-146 29c-26,5 -8,-2 -30,9 -19,9 4,3 -26,17 139,4 298,-37 439,-43 49,-2 109,-11 155,-11 986,-1 1841,387 2532,1082z"/>
<path class="fil1" d="M17275 7474c55,0 100,13 151,21 98,13 209,33 306,51 448,54 -44,-607 -314,-693 -205,-76 -410,-122 -624,-173 -119,-19 -247,-21 -335,28 -113,64 -89,146 -93,289 -17,874 246,1564 187,3217 -1,120 -38,236 -19,361 27,167 121,165 261,137 19,-4 21,-2 40,-8 14,-4 51,-22 65,-29 99,-50 147,-90 221,-167 55,-59 15,-18 61,-87 226,-333 158,-1041 238,-1198 15,-28 117,-49 144,-54 136,-27 308,-78 414,-162 128,-102 124,-307 112,-470 -29,-367 -268,-286 -467,-288 -289,-3 -214,108 -292,-446 -10,-74 -59,-270 -56,-329z"/>
</g>
</svg>
I don't really work with SVG, this logo was made by an agency. So I'll appreciate any help!
This makes the logo the same size as the viewbox:
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xml:space="preserve"
version="1.1"
style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
viewBox="0 0 7342.1074 7220.7803"
id="svg32"
sodipodi:docname="logo.svg"
width="7342.1074"
height="7220.7803"
inkscape:version="0.92.1 r15371"><metadata
id="metadata36"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1107"
inkscape:window-height="713"
id="namedview34"
showgrid="false"
inkscape:zoom="0.040190476"
inkscape:cx="2968.8339"
inkscape:cy="1904.8506"
inkscape:window-x="190"
inkscape:window-y="33"
inkscape:window-maximized="0"
inkscape:current-layer="svg32" />
<defs
id="defs20">
<style
type="text/css"
id="style18">
<![CDATA[
.fil0 {fill:#0496ff}
.fil1 {fill:#F8F8FD}
.fil2 {fill:#3245AA;fill-rule:nonzero}
]]>
</style>
</defs>
<g
id="Capa_x0020_1"
transform="translate(-11881.166,-5184.0702)">
<metadata
id="CorelCorpID_0Corel-Layer" />
<circle
class="fil0"
cx="15466"
cy="8645"
r="2938"
id="circle23"
style="fill:#0496ff" />
<path
class="fil1"
d="m 15129,6849 c -554,-184 -1785,23 -2016,623 -279,725 -52,2348 503,3094 25,21 39,32 69,53 322,173 424,199 822,227 2510,173 2220,-3465 622,-3997 z m -1567,953 c -52,609 117,1701 283,2287 78,219 -19,139 346,196 213,34 411,-8 601,-101 392,-195 420,-935 360,-1302 -145,-896 -479,-1383 -1386,-1149 -42,11 -165,40 -204,69 z"
id="path25"
inkscape:connector-curvature="0"
style="fill:#f8f8fd" />
<path
class="fil0"
d="m 17743,6335 c 123,134 209,259 315,405 185,270 298,510 402,824 967,2926 -1638,4620 -3839,4213 -1228,-227 -2335,-1165 -2614,-2769 -48,-271 -45,-861 21,-1094 l 25,-117 c 7,-45 29,-95 22,-125 -46,79 -64,141 -87,245 -186,823 -129,1483 170,2237 11,28 22,56 34,84 246,571 650,1021 1121,1427 1418,1190 3695,866 4916,-412 2143,-2243 577,-5662 -2367,-6048 -338,-44 -708,-14 -1043,47 l -146,29 c -26,5 -8,-2 -30,9 -19,9 4,3 -26,17 139,4 298,-37 439,-43 49,-2 109,-11 155,-11 986,-1 1841,387 2532,1082 z"
id="path27"
inkscape:connector-curvature="0"
style="fill:#0496ff" />
<path
class="fil1"
d="m 17275,7474 c 55,0 100,13 151,21 98,13 209,33 306,51 448,54 -44,-607 -314,-693 -205,-76 -410,-122 -624,-173 -119,-19 -247,-21 -335,28 -113,64 -89,146 -93,289 -17,874 246,1564 187,3217 -1,120 -38,236 -19,361 27,167 121,165 261,137 19,-4 21,-2 40,-8 14,-4 51,-22 65,-29 99,-50 147,-90 221,-167 55,-59 15,-18 61,-87 226,-333 158,-1041 238,-1198 15,-28 117,-49 144,-54 136,-27 308,-78 414,-162 128,-102 124,-307 112,-470 -29,-367 -268,-286 -467,-288 -289,-3 -214,108 -292,-446 -10,-74 -59,-270 -56,-329 z"
id="path29"
inkscape:connector-curvature="0"
style="fill:#f8f8fd" />
</g>
</svg>
I'm not sure how much of what Inkscape added is actually necessary (like I commented above, SVG isn't my forte), but if you save this in an .svg file and then load it with an <img /> tag, you can set whatever size you actually need. Otherwise, setting the height and width attributes would work as well.
Here's a jsFiddle with the height and width set to 400px: https://jsfiddle.net/sogdk632/
Download Inkscape Resize the logo Select the whole logo (ctrl + a) export the selection as png (shift + ctrl + e) click export
It was obviously designed in the middle of a big page and didn't have the artboard size set correctly.
All you needed to do was adjust the viewBox values so that they match the logo more closely.
viewBox="11802 5162 7470 7250"
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="11802 5162 7470 7250"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#0496ff}
.fil1 {fill:#F8F8FD}
.fil2 {fill:#3245AA;fill-rule:nonzero}
]]>
</style>
</defs>
<g id="Capa_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<circle class="fil0" cx="15466" cy="8645" r="2938"/>
<path class="fil1" d="M15129 6849c-554,-184 -1785,23 -2016,623 -279,725 -52,2348 503,3094 25,21 39,32 69,53 322,173 424,199 822,227 2510,173 2220,-3465 622,-3997zm-1567 953c-52,609 117,1701 283,2287 78,219 -19,139 346,196 213,34 411,-8 601,-101 392,-195 420,-935 360,-1302 -145,-896 -479,-1383 -1386,-1149 -42,11 -165,40 -204,69z"/>
<path class="fil0" d="M17743 6335c123,134 209,259 315,405 185,270 298,510 402,824 967,2926 -1638,4620 -3839,4213 -1228,-227 -2335,-1165 -2614,-2769 -48,-271 -45,-861 21,-1094l25 -117c7,-45 29,-95 22,-125 -46,79 -64,141 -87,245 -186,823 -129,1483 170,2237 11,28 22,56 34,84 246,571 650,1021 1121,1427 1418,1190 3695,866 4916,-412 2143,-2243 577,-5662 -2367,-6048 -338,-44 -708,-14 -1043,47l-146 29c-26,5 -8,-2 -30,9 -19,9 4,3 -26,17 139,4 298,-37 439,-43 49,-2 109,-11 155,-11 986,-1 1841,387 2532,1082z"/>
<path class="fil1" d="M17275 7474c55,0 100,13 151,21 98,13 209,33 306,51 448,54 -44,-607 -314,-693 -205,-76 -410,-122 -624,-173 -119,-19 -247,-21 -335,28 -113,64 -89,146 -93,289 -17,874 246,1564 187,3217 -1,120 -38,236 -19,361 27,167 121,165 261,137 19,-4 21,-2 40,-8 14,-4 51,-22 65,-29 99,-50 147,-90 221,-167 55,-59 15,-18 61,-87 226,-333 158,-1041 238,-1198 15,-28 117,-49 144,-54 136,-27 308,-78 414,-162 128,-102 124,-307 112,-470 -29,-367 -268,-286 -467,-288 -289,-3 -214,108 -292,-446 -10,-74 -59,-270 -56,-329z"/>
</g>
</svg>
Svg map not working if I save it .html
<svg xmlns="http:/www.w3.org/2000/svg" version="1.1" viewBox="0 0 462.22 473.42"> <g transform="translate(-140.31946,-267.08233)"> <clipPath id="img"> <path style="fill:#cccccc;fill-opacity:1;stroke:#ffffff;stroke-width:0.5;stroke-opacity:1" inkscape:connector-curvature="0" d="m 164.84,522.87 0.11,0.44 1.2,1.23 1.14,0.03 2.18,0.85 1.25,-0.2 1.87,-1.43 0.73,-0.13 1.15,0.06 0.44,0.49 1.07,0.01 0.72,-0.56 1.34,0.46 1.3,1.66 0.43,3.08 1.11,0.53 -0.73,2 0.31,0.44 0.75,-0.43 2.12,0.49 0.38,-0.41 0.08,-1.14 0.5,-0.65 1.15,0.02 0.95,-0.98 1.4,-0.6 0.35,0.14 1.03,-0.31 0.34,1.32 3.17,0.61 0.54,-0.61 1.37,-0.08 0.37,-0.9 1.36,-0.97 0.96,-0.04 1.82,-0.88 1.32,-1.82 1.02,-0.33 0.78,0.08 0.9,0.77 1.68,0.43 1.53,1.59 0.56,0.03 0.44,1.16 0.64,0.05 0.76,1.3 1.11,-0.38 1.98,1.3 1.06,-0.19 1.55,-1.16 1.19,0.19 1.42,1.41 0.07,0.65 -0.46,1.06 -0.88,0.44 -0.59,0.89 0.04,1.45 -0.39,1.05 0.55,0.92 1.27,-0.23 1.82,1.1 0.57,-0.14 0.86,0.29 1.19,-0.73 -0.03,-0.84 -0.59,0.44 -0.61,-0.27 -0.39,-1.27 1.54,0.16 -0.51,-1.37 0.76,-0.87 1.17,-0.57 1.82,0.38 1.75,-0.45 0.85,-0.57 1.24,0.37 1.64,-0.73 1.19,0.33 0.45,1.49 1.63,0.27 1.39,-0.51 1.06,0.18 1.41,-0.41 1.73,-0.02 1.05,-0.56 0,0 0.73,2.16 1.58,0.07 0.44,-0.1 1.09,-1.33 -0.15,-0.73 0.49,-0.29 0.74,0.15 -0.19,2.49 -0.71,0.41 -0.18,0.46 0.06,1.8 -1.56,1.65 0.06,0.37 0.66,0.5 -0.07,0.59 0.49,0.3 0.25,0.62 1.89,1.42 2.04,1.03 1.18,-0.31 0.43,0.37 1.39,-0.26 0.4,0.22 0.91,1.85 -0.28,1.03 0.23,0.58 1.65,1.36 1.06,0.05 0.7,0.38 0.2,0.61 -0.2,0.86 1.4,-0.2 1.31,1.42 0.63,0.13 0.23,0.32 0,0 -0.47,0.57 -3.32,1.69 0.56,0.84 -0.7,0.86 -0.38,1.77 0.31,0.39 0.92,0.27 0.53,0.76 -0.22,0.87 -1.27,0.38 -2.71,1.63 -1.54,-0.19 -0.74,0.36 -1.49,1.87 -0.19,1.09 -0.86,0.24 -1.16,1.08 0.38,0.88 -0.99,0.92 -0.77,1.43 0.42,0.85 -0.5,0.52 0.53,0.53 -2.59,1.57 0.2,0.81 -0.26,0.64 -0.78,-1.33 0.03,-0.43 -0.94,-1.14 -0.87,-0.41 0.04,-0.73 -1.18,0.25 -1.93,-0.31 -0.5,0.45 -1.03,-0.4 -0.58,0.8 -0.57,0.01 -1.58,2.17 0.61,0.66 0.7,0.2 -0.52,0.44 0.46,0.77 -0.67,0.72 0.49,1.81 -1.88,1.12 -1.39,2.33 -0.63,-0.35 -0.48,0.21 -0.6,-0.17 -1.12,0.77 -2.53,0.25 0.61,0.55 -0.73,1.44 1.02,0.58 0.17,0.39 -0.66,1.1 0.09,0.83 -0.46,1.72 0.28,0.89 -0.59,1.39 -1.88,-0.39 -1.41,0.55 -0.53,0.69 -0.9,0.02 -0.85,0.82 -0.78,1.72 0.7,0.56 0.75,0.14 0.32,0.69 0.66,0.1 0.03,0.62 0.37,0.22 -1.37,0.43 -0.94,1.87 -0.57,0.31 -0.76,-0.05 -1.26,0.77 0.05,0.83 -0.74,1.28 0.17,2.6 2.44,1.43 1.28,1.87 -0.14,1 -0.52,0.29 -0.05,0.93 0.73,0.39 0.15,0.8 -0.59,0.83 -1.21,0.43 -0.34,1.75 -0.34,0.37 1.65,1.48 0.96,2.58 -0.13,1.8 0.53,2.61 -0.44,0.39 -1.34,0.15 0,0 -1.29,-0.28 -0.52,0.23 -0.52,-0.34 0,0 -0.08,-1.97 -1.13,-1.56 -0.32,-1.52 -1.12,-0.56 -1.37,-1.84 -1.42,0.11 0.02,-0.67 -0.43,-0.55 0.01,-0.92 -0.32,-0.42 -1.16,0.17 -0.75,-0.56 -1.03,0.27 -0.45,-0.57 -1.5,-0.3 -0.42,-1.05 0.42,-0.86 -0.25,-0.53 0.34,-1.02 -1.99,-0.45 -0.67,-0.93 2.15,-3.09 -0.84,-1.21 -2.35,-1.52 -0.47,-0.75 0.53,-2.37 0.78,-1.57 -0.54,-1.26 -1.5,-0.86 -0.3,-0.95 0.13,-0.89 -0.72,-2.3 -0.47,-0.49 -0.41,-2.54 0.55,-1.53 0.04,-1.33 -1.68,-2.95 -0.75,-0.46 -0.34,0.14 -1.57,-1.25 -1.1,-3.81 -0.64,-0.95 -0.39,-1.37 -1.25,-1.38 0.17,-1.45 0.33,-0.38 -1.25,-0.25 -0.96,0.88 -0.79,0.04 -0.19,-0.13 0.15,-0.48 -0.9,-0.05 -0.17,-0.61 -0.72,-0.13 -0.24,-0.41 -1.57,0.3 -0.76,-0.46 -0.44,0.14 -0.05,-0.8 -0.75,-0.02 -0.07,-2.24 -0.61,-0.42 0.35,-0.18 0.42,-1.17 -1.05,-1.57 0.02,-1.71 -0.98,-0.79 1.02,-0.29 0.27,-0.39 1.05,0.79 0.31,-0.17 -0.51,-2.42 0.17,-1.41 -1.09,-0.68 -0.31,0.19 0.12,-0.61 -0.37,-0.1 -1.05,-1.29 -0.33,-0.01 -0.89,0.77 -0.32,-0.2 -0.12,-0.68 -1.05,-0.23 -0.71,0.22 -1.07,-0.99 -1.05,-1.97 -0.82,-0.77 -0.06,-0.75 -0.4,-0.51 0.95,-1.39 -0.04,-0.41 -1.32,-1.54 -0.48,-1.11 -0.07,-1.3 -1.17,-0.38 -2.3,0.23 -0.78,0.52 -0.99,-0.5 -2.61,0.38 -0.81,-1.16 -1.1,-0.45 -0.17,-0.69 -1.63,-0.17 0,0 -0.43,0 -1.11,-0.91 -1.84,-0.11 -0.21,-1.41 -0.86,-0.58 0,0 -0.48,-1.34 -0.42,-2.96 1.07,-1.26 0.33,-0.8 -1.27,-2.99 0.05,-0.64 0.37,-0.32 -0.27,-0.9 0.07,-1.68 2.07,-1.9 0.35,-0.14 0.42,0.48 0.2,-0.62 -0.5,-0.67 -0.68,0.06 -0.66,-0.53 0.04,-1.21 1.22,-0.95 0.6,-0.85 1.28,-0.45 0.44,0.86 0.87,0.61 2.25,0.71 z" class="land" title="Alba" id="RO-AB" /> <image xlink:href="ana.jpg" clip-path="url(#img)" x="0" y="0" height="50px" width="50px"/> </clipPath> </g> </svg> Why is this code now working if i save it like a html document? Please help me . I am very new in svg so do not be rude with me :)