HUSTLE HARD Posted December 1, 2020 Share Posted December 1, 2020 Hi i am trying to add a small icon inside my svg radial progress bar..however simply adding in a img tag breaks the design. <svg height="50" width="50" class="progress blue noselect" data-progress="'.$brperc.'" viewbox="0 0 80 80"> <path class="track" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" /> <path class="fill" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" /> <text class="value" style="font-size:16px;" x="50%" y="55%">0%</text> </svg> var forEach = function (array, callback, scope) { for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); } }; window.onload = function(){ var max = -219.99078369140625; forEach(document.querySelectorAll('.progress'), function (index, value) { percent = value.getAttribute('data-progress'); value.querySelector('.fill').setAttribute('style', 'stroke-dashoffset: ' + ((100 - percent) / 100) * max); value.querySelector('.value').innerHTML = percent + '%'; }); } I want the end result like below.. 2 Quote Link to comment Share on other sites More sharing options...
URBANZ Posted December 2, 2020 Share Posted December 2, 2020 (edited) main thing with svg is img tag wont work you need to use the correct formatting so it would be <image xlink:href="URL HERE" width="WIDTH" height="HEIGHT"/> you can also use clip-path="url(ELEMENT)" if you want it to clip to an element. if used correctly then you get result like below Edited December 2, 2020 by urbanmafia 2 Quote Link to comment Share on other sites More sharing options...
Karma Posted December 3, 2020 Share Posted December 3, 2020 I actually like this, its classy good job. 🙂 Quote Link to comment Share on other sites More sharing options...
peterisgb Posted December 5, 2020 Share Posted December 5, 2020 I did this on my last game. Quote Link to comment Share on other sites More sharing options...
Magictallguy Posted December 5, 2020 Share Posted December 5, 2020 5 hours ago, peterisgb said: I did this on my last game. Awesome. How about helping the OP achieve the same effect? 😉 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.