Fill custom SVG image using percentage value
The simplest method is probably with a linear gradient.
function setProgress(amt){ amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt; document.getElementById("stop1").setAttribute("offset", amt); document.getElementById("stop2").setAttribute("offset", amt);}
setProgress(0.25);<svg width="400" height="400"> <defs> <linearGradient id="progress" x1="0" y1="1" x2="0" y2="0"> <stop id="stop1" offset="0" stop-color="blue"/> <stop id="stop2" offset="0" stop-color="lightblue"/> </linearGradient> </defs>
<circle id="my-shape" cx="200" cy="200" r="200" fill="url(#progress)"/></svg>Fill Percentage area in a custom Oval SVG image
As I've commented:
You can calculate the length of the path using the getTotalLength() method. This represents 100%.
Next you can get the length representing the x% (xperc in the code).
Now you can use stroke-dasharray to represent the partial path.
You can calculate the position of the last point using the getPointAtLength() method.
Please read the comments in my code.
//the desired percentege
let xperc = .35;
//the total length of the path
let tl = base.getTotalLength();
//the partial length at the given percentage xperc
let partial = tl * xperc;
//set the stroke-dasharray of the second use element
perc.setAttribute("stroke-dasharray", `${partial} ${tl -partial}`)
//calculate the position of the point marking the end position
let theEnd = base.getPointAtLength(partial);
// set the cx and the cy attributes for the end point
end.setAttribute("cx", theEnd.x);
end.setAttribute("cy", theEnd.y);circle {
stroke: red;
fill:white;
stroke-width: 6.87634;
}<svg width="207" height="203" viewBox="0 0 207 203" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="base" d="M99.8166,12.0696L99.8166,12.0696C166.505,8.38025 229.464,105.579 187.273,158.807C146.361,210.123 57.6867,212.16 23.2957,165.019C-17.4645,102.855 19.0794,16.4061 99.8166,12.0696Z" stroke-width="6.87634" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</defs>
<use xlink:href="#base" stroke="silver" />
<use xlink:href="#base" stroke="red" id="perc" />
<circle cx="99.8166" cy="12.0696" r="10" />
<circle id="end" r="10" />
</svg>How to fill background color to svg image in percentage
I would do it with clip-path.
mooning()
control.addEventListener("input",()=>{mooning()})
function map(n, a, b, _a, _b) { let d = b - a; let _d = _b - _a; let u = _d / d; return _a + n * u;}
function mooning(){output.innerHTML = control.value + "%";let value = map(control.value, 0, 100, -25, 175)moon.setAttributeNS(null, "cx", value)}svg{border:1px solid; width:75vh}#control{width:75vh;} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"> <clipPath id="cp"> <circle id="fullMoon" r="50" cy="75" cx="75"/> </clipPath> <g clip-path="url(#cp)"> <rect width="100%" height="100%" /> <circle id="moon" r="50" cy="75" cx="175" fill="white" /> </g> <use xlink:href="#fullMoon" fill="none" stroke="black" /> </svg>
<p><input id="control" type="range" min="0" max="100" value="60" /><span id="output"></span></p>Fill Percentage area in a custom Progress Bar SVG
As I've commented: if you want to use a maska mask you can use a thick line (stroke-width="9" - for example) instead of the ellipse, and you can mask this line. Then you can change the stroke-dasharray according to the percentage you have.
//the total length of the line which in this case is as long as the shape
let tl = theLine.getTotalLength();
// the percentage for the progress
let xperc = itr.value;
onInput();
itr.addEventListener("input", onInput);
// a function that is setting the value for the stroke-dasharray of the line according with the progress
function onInput() {
xperc = itr.value;
theLine.setAttribute("stroke-dasharray", `${tl * xperc} ${tl - tl * xperc}`);
}<input id="itr" type="range" min="0" max="1" value="0.35" step=".001" /><br>
<svg width="233" height="9" viewBox="0 0 233 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="theShape" d="M0.0104229 4.53685C0.585564 0.0541843 77.5774 0.498692 134.721 1.59593C171.989 2.31113 232.913 -0.235688 232.75 4.22739C232.525 10.3451 134.045 7.87626 89.0013 7.23356C39.1891 6.52242 -0.727053 10.2816 0.0104229 4.53685Z" />
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="233" height="9">
<use xlink:href="#theShape" fill="#fff" />
</mask>
</defs>
<use xlink:href="#theShape" fill="#DADBDD" />
<path id="theLine" d="M0 4.5L233 4.5" stroke="#ED718F" stroke-width="9" mask="url(#mask0)" />
</svg>is it possible to make SVG circle fill color from bottom to top based on percentage?
you could use a gradient with stop-opacity to do this.
you would add two "middle" stops with opacity 0 and 1 respectively an set the offset of both to the percentage you need.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"> <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> <stop offset="40%" stop-opacity="1" stop-color="royalblue"/> <stop offset="40%" stop-opacity="0" stop-color="royalblue"/> <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> </linearGradient> <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/></svg>Forcing an SVG to resize based on percentage height
With a lot of help, I was able make this javascript solution. I hope this helps anyone who wants to get a row of svgs that are fully responsive to the height and width of the screen. Note that because the text in the footer containing the SVGs is not completely responsive to height, the svgs disappear at the smallest media heights. If you want it fully responsive, you should make the text divs height-dependent.
Here is the codepen: http://codepen.io/ihatecoding/pen/vGrVQd
Here is the snippet:
$(document).ready(scaleSVG);$(window).on('resize', scaleSVG);
function scaleSVG() { var scale = 0.9; var $eyCol = $(".ey-col-svg"); var eyWidth = $eyCol.width(); var eyHeight = $eyCol.height(); var maxHeight = .4 * $(window).height();
if(eyHeight < eyWidth && eyHeight < maxHeight) $(".areaSVG").height(maxHeight);
var imageWidth = scale * $eyCol.width(); var imageHeight = $eyCol.height(); var tot = imageWidth > imageHeight ? imageHeight : imageWidth; //var imageHeight = 0.5*$(".ey-col-svg").height();
$(".areaSVG").css("width", tot); $(".areaSVG").css("height", tot);};#footer { text-align: center; position: fixed; vertical-align: middle; bottom: 0; left: 0; z-index: 5000; width: 100%; max-height: 40vh;}
.areaSVG { /* this is the height setting I wanted to be a percentage */ /*height: 30%; <------ there*/ overflow: visible; box-sizing: content-box; backgroud-color: Grey;}
.ey-col-svg { display: block; height: calc(100% - 30px); max-height: calc(40vh - 2vw - 63px); padding: 0 0; margin:0; text-align: center; background-color: Red;}
.ey-nav-bar { background-color: MediumVioletRed ! important; width: 100% !important; height: 100%; overflow: hidden; text-align: center;}
.ey-row-scale { text-align: center; padding-left: 2.5%; padding-right: 2.5%; display: block; background-color: Orange; max-width: 95%; height: calc(100% - 28px); overflow: hidden;}
.ey-col-1 { text-align: center; background-color: Green; width: 20%; height: 100%; margin: 0; padding: 0; display: inline-block; border-collapse: collapse;}
.ey-text-content { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: block; text-align: center; white-space: nowrap; font-size: 2vw; height: calc(2vw + 5px); line-height: calc(2vw + 5px); color: black; z-index: 10000;}
#linkTextCell { text-align: center; width: 100%; height: 28px; line-height: 28px; vertical-align: middle; font-size: 150%; display: block; color: White; background-color: Blue;}
#content { font-size: 2vw;}
.fillDark{fill:DimGray;}.fillWhite{fill:White;}.strokeDark{stroke:DimGray;}.strokeWhite{stroke:White;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id="content"> <p>Javascript solution to scaling svgs. This isn't perfect. At the very smallest heights the SVGs disappear (because the text isn't scaling in response to hight). But, with a bit of work you can customize this to your needs.</p> </div>
<div id="footer">
<div id="linkTextCell" class="navText hideRow"> Links:</div>
<div class="ey-nav-bar"> <div class="ey-row-scale">
<div class="ey-col-1"> <a class = "eSVG areaAnchor" href="#">
<div class="ey-col-svg">
<svg class="areaSVG" viewBox="20 0 37 73" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new " d=" M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381 C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" /> <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d=" M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75 C12.787,37.379,11.41,38.895,11.41,38.895z" /> <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" /> <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" /> <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d=" M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393 c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456 c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558 c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" /></svg>
</div>
<div class="ey-text-content navText">Link 1</div> </a>
</div>
<div class="ey-col-1"> <a class = "sSVG areaAnchor" href="#">
<div class="ey-col-svg"> <svg class="areaSVG" viewBox="20 0 37 73" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new " d=" M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381 C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" /> <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d=" M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75 C12.787,37.379,11.41,38.895,11.41,38.895z" /> <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" /> <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" /> <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d=" M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393 c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456 c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558 c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" /> </svg> </div>
<div class="ey-text-content navText">Link 2</div>
</a>
</div>
<a class = "wSVG areaAnchor" href="#">
<div class="ey-col-1">
<div class="ey-col-svg"> <svg class="areaSVG" viewBox="20 0 37 73" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new " d=" M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381 C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" /> <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d=" M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75 C12.787,37.379,11.41,38.895,11.41,38.895z" /> <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" /> <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" /> <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d=" M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393 c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456 c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558 c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" /> </svg> </div> <div class="ey-text-content navText">Link 3</div>
</div> </a>
<div class="ey-col-1"> <a class = "nSVG areaAnchor" href="#">
<div class="ey-col-svg"> <svg class="areaSVG" viewBox="20 0 37 73" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new " d=" M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381 C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" /> <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d=" M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75 C12.787,37.379,11.41,38.895,11.41,38.895z" /> <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" /> <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" /> <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d=" M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393 c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456 c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558 c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" /> </svg> </div>
<div class="ey-text-content navText">Link 4</div> </a>
</div>
</div> </div>
</div>How to set svg width and svg height by percent?
I solved my problem.
I change my code to this and this is working:
<svg style="width:100%;height:100%;">
<line x1="100%" y1="0%" x2="0%" y2="100%" style="stroke: rgb(234, 243, 234);stroke-width: 5;"></line>
</svg>
Related Topics
Jquery Animate Top (From Bottom to Top)
How to Get CSS Transform Rotation Value in Degrees with JavaScript
Listing Known CSS Classes Using JavaScript
How to Save Data from a Form with HTML5 Local Storage
Passing Mouse Clicks Through an Overlaying Element <Div>
How to Detect Internet Explorer (Ie) and Microsoft Edge Using JavaScript
How to Change Url in Browser Without Navigating Away from Page
Change Iframe Src by Clicking a Link
How to Calculate Angle of Rotation to Make Width Fit Desired Size in Perspective Mode
Set A:Visited Style with JavaScript or Jquery
How to Detect Linked PDF on a Page and Show Message to Download Adobe Reader Using Jquery
Animate Length of Border-Bottom
Distribute Elements Evenly Using CSS
JavaScript - Loading/Busy Indicator or Transparent Div Over Page on Event Click