Develop Reference

Why is a javascript script not running on one wordpress page, but working fine on another?

I've made a dice roller, implementing the code I wrote here.
I added it to a shortcut function in wordpress functions.php , and was all working fine. Just checked it again, and it works perfectly on one page (scroll to the bottom), but doesn't on another, and I've got no idea why!
Any thoughts?
HTML:
<div class="dicerollingwrapper">
<div class="dicebox dicetransform">
<svg id="dicesvg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style> .dicetextsecond {font: 70px serif; fill: white; fill-opacity:0;}
.dicetextfirst {font: 70px serif; fill: white;}
</style>
<path class="dicetospin" d="M38.8,-69C44.4,-64,38.9,-41.6,40.7,-27.2C42.6,-12.8,51.8,-6.4,52.6,0.5C53.4,7.3,45.7,14.6,39,20.7C32.3,26.7,26.6,31.5,20.3,38.2C14,45,7,53.6,0.2,53.2C-6.5,52.9,-13.1,43.4,-21.5,37.9C-30,32.4,-40.4,30.9,-45.6,25.2C-50.8,19.6,-50.9,9.8,-48.4,1.4C-45.8,-6.9,-40.8,-13.8,-37.7,-23C-34.5,-32.2,-33.2,-43.8,-27.3,-48.5C-21.3,-53.3,-10.7,-51.2,3,-56.4C16.6,-61.6,33.2,-73.9,38.8,-69Z" transform="translate(100,100)" />
<text x="50%" y ="60%" text-anchor="middle" class="dicetextsecond">13</text>
<text x="50%" y ="60%" text-anchor="middle" class="dicetextfirst">?</text>
</svg>
</div>
CSS:
.dicebox {
/* background-color: #ff8D9B; */
height: 300px;
width: 300px;
}
.dicetransform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.dicetransform-active {
animation-name: rotate;
animation-duration: 4s;
animation-fill-mode: forwards;
}
#keyframes rotate {
100% {transform:rotate(4320deg); }
}
.dicetexttransform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.dicetexttransform1-active {
animation: hidecolor 4s forwards;
}
#keyframes hidecolor {
0% { fill: white; }
100% {fill-opacity:0;}
}
.dicetexttransform2-active {
animation: showcolor 4s forwards;
}
#keyframes showcolor {
0% {fill-opacity:0;}
100% {fill-opacity:1;fill: white;}
}
#dicebutton {width:300px; height:50px; background-color:#ff8888; font-size: 24px; border:none; border-radius: 15px;transition-duration: 0.4s; font-weight:bold;}
#dicebutton:hover {background-color:#000; color:#ff8888}
JS:
$("#dicebutton").click(function() {
$('.dicetransform').toggleClass('dicetransform-active');
// generate random
let x = Math.floor((Math.random() * 13) + 1);
//find SVG elements
var numberdiceSVG = document.querySelector('#dicesvg .dicetextsecond');
var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');
//set number
numberdiceSVG.textContent = x;
// reset if animated already done
if(numberdiceSVG.getAttribute('class') === "dicetextsecond dicetexttransform dicetexttransform2-active") {
numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform');
hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform');
}
else {
hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform dicetexttransform1-active');
numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform dicetexttransform2-active');
}
var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');
});

On your second page you have the same element with the same id twice on the page:
<input type="button" id="dicebutton" value="Roll a d13!"></input>
Both have the same id: dicebutton.
The HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML document.
If you want the input multiple times on the page use different id's for each one: eg: dicebutton1 and dicebutton2 and then add the event handler:
$("#dicebutton1, #dicebutton2").click(function()
Of assign the input a class "dicebutton" instead. And add the event handler like this:
$(".dicebutton1").click(function()

How to stop SVG animation on click?

I have an svg animation, I want to be able to stop/pause the animation on click but I can't figure out how and I need help, I tried to toggle but I think I have to toggle each line which I don't know how to.
<div class="loader">
<svg id="wave" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 38.05">
<path id="Line_1" class="t" data-name="Line 1" d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z"/>
<path id="Line_1" class="t" data-name="Line 2" d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z"/>
<path id="Line_1" class="t" data-name="Line 3" d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z"/>
<path id="Line_1" class="t" data-name="Line 4" d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z"/>
<path id="Line_1" class="t" data-name="Line 5" d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z"/>
<path id="Line_1" class="t" data-name="Line 6" d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z"/>
<path id="Line_1" class="t" data-name="Line 7" d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z"/>
<path id="Line_1" class="t" data-name="Line 8" d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z"/>
<path id="Line_1" class="t" data-name="Line 9" d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z"/>
</svg>
</div>
css
.loader {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#wave {
height: 70px;
width: 70px;
fill: black;
}
#wave.stop {
animation-play-state: paused;
}
#Line_1 {
animation: pulse 1s infinite;
animation-delay: 0.15s;
}
#Line_2 {
animation: pulse 1s infinite;
animation-delay: 0.3s;
}
#Line_3 {
animation: pulse 1s infinite;
animation-delay: 0.45s;
}
#Line_4 {
animation: pulse 1s infinite;
animation-delay: 0.6s;
}
#Line_5 {
animation: pulse 1s infinite;
animation-delay: 0.75s;
}
#Line_6 {
animation: pulse 1s infinite;
animation-delay: 0.9s;
}
#Line_7 {
animation: pulse 1s infinite;
animation-delay: 1.05s;
}
#Line_8 {
animation: pulse 1s infinite;
animation-delay: 1.2s;
}
#Line_9 {
animation: pulse 1s infinite;
animation-delay: 1.35s;
}
js
var vawe = document.getElementById("vawe")
vawe.addEventListener('click',function() {
vawe.classList.toggle('stop');
})
when I click on the svg I want to stop pause the animation, so that the music stop, and then click again the animation starts again.

#wave.stop {
animation-play-state: paused;
}
Doesn't apply the animation-play-state to the actually animated (line) elements.
The css rule should rather look something like this:
#wave.stop .t {
animation-play-state: paused;
}
I also recommend to use class selectors to avoid unnecessarily high specificity
(introduced by id selectors in your css rules).
var wave = document.getElementById("wave")
wave.addEventListener('click', function(e) {
e.currentTarget.classList.toggle('stop');
})
.loader {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#wave {
height: 10em;
fill: black;
}
.stop {
border: 1px solid red;
}
.stop .t {
animation-play-state: paused;
}
.t {
transform-origin: center;
animation: pulse 1s infinite forwards;
transform: scale(1, 0.5)
}
.Line_1 {
animation-delay: 0.15s;
}
.Line_2 {
animation-delay: 0.3s;
}
.Line_3 {
animation-delay: 0.45s;
}
.Line_4 {
animation-delay: 0.6s;
}
.Line_5 {
animation-delay: 0.75s;
}
.Line_6 {
animation-delay: 0.9s;
}
.Line_7 {
animation-delay: 1.05s;
}
.Line_8 {
animation-delay: 1.2s;
}
.Line_9 {
animation-delay: 1.35s;
}
#keyframes pulse {
0% {
transform: scale(1, 0.5)
}
50% {
transform: scale(1, 1)
}
100% {
transform: scale(1, 0.5)
}
}
<div class="loader">
<svg class="wave" id="wave" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 38.05">
<path id="Line_1" class="t Line_1" data-name="Line 1" d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z"/>
<path id="Line_2" class="t Line_2" data-name="Line 2" d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z"/>
<path id="Line_3" class="t Line_3" data-name="Line 3" d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z"/>
<path id="Line_4" class="t Line_4" data-name="Line 4" d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z"/>
<path id="Line_5" class="t Line_5" data-name="Line 5" d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z"/>
<path id="Line_6" class="t Line_6" data-name="Line 6" d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z"/>
<path id="Line_7" class="t Line_7" data-name="Line 7" d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z"/>
<path id="Line_8" class="t Line_8" data-name="Line 8" d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z"/>
<path id="Line_9" class="t Line_9" data-name="Line 9" d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z"/>
</svg>
</div>

Since the delay is required on resume, try this JavaScript alternative. The animation property of the element is individually set or unset depending upon the state.
let el = document.getElementById("vawe")
el.addEventListener('click', (e) => {
let value = 'unset';
if ( e.currentTarget.classList.contains('stop') ) {
e.currentTarget.classList.remove('stop');
value = 'pulse 1s infinite';
} else {
e.currentTarget.classList.add('stop');
}
e.currentTarget.childNodes.forEach(child => {
child.style.setProperty('animation-name', value);
});
});

Back to top icon not showing on site, even though showing in local

I have a back to top button that is supposed to appear when scrolling past the top part of the page, and disappears when it goes to the top of the page.
It appears in my local site copy when testing, but on the internet, it isn't showing and only the text link shows instead.
The site is at: https://www.ivanteong.com
The back to top button is implemented with the following:
Bottom of HTML page but above the JavaScript sources:
Top</div>
JavaScript sources at the bottom of the HTML page (When I put it in header there is problem with the menu scrolling):
<!-- JS -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/waypoints.min.js"></script>
<script src="../js/counterup.min.js"></script>
<script src="../js/inview.min.js"></script>
<script src="../js/easypiechart.js"></script>
<script src="../js/magnific-popup.min.js"></script>
<script src="../js/main.js"></script>
<script src="../js/backtotop.js"></script>
CSS styling for this in main.css:
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
z-index: 1000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: GREY url(../images/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
border-radius: 10px;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #FF432E;
opacity: 1;
}
backtotop.js:
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 0,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1500,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 1500,
//grab the "back to top" link
$back_to_top = $('.cd-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('div,body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
cd-top-arrow.svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<polygon fill="#FFFFFF" points="8,2.8 16,10.7 13.6,13.1 8.1,7.6 2.5,13.2 0,10.7 "/>
</svg>

This is a caching issue. I can't be 100% sure but I suspect that it has something to do with Cloudflare, which I use to manage my DNS, enforce HTTPS and redirect traffic from non-www to www. Paul LeBeau found that the css file is not updated, and I discovered that it is not updated for the www version, but the non-www is updated. After I loaded up these 2 variants of CSS, I don't know what happened but it works again. Maybe I "forced" Cloudflare to update the CSS file to the latest version and it couldn't use the cached copy of the CSS for the www site.
UPDATE: I'm sure this is Cloudflare's caching issue. I got the same problem again after changing the CSS for a loading animation for page loading. This problem is resolved if I want to make sure that Cloudflare only caches the latest copy of the files, by purging everything on Cloudflare's cache. Then it will have no problems loading up the latest code for my DNS.

2 javascript functions conflicting

I want the logo to fill in when the animation ends and then be able to click the logo and change its color. Currently when the animation ends the logo fills in but afterwards the color doesn't change when I click it. While the stroke is being drawn I can click inside the logo and it will change color but as soon as the animation ends it no longer changes color on click.
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<defs>
<style type="text/css">
.st0{fill:#fff;stroke:#F15A43;stroke-width:10;stroke-miterlimit:10;}
.st0 {
stroke-dasharray: 2100;
stroke-dashoffset: 0;
-webkit-animation: dash 2s linear forwards;
-o-animation: dash 2s linear forwards;
-moz-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
#logo.clickit .st0 {
fill: #000;
transistion: .8s;
}
#logo.load .st0 {
fill: #434343;
transition: .5s;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 2100;
}
to {
stroke-dashoffset: 0;
}
}
<script type="text/javascript">
var loader = document.getElementById('logo');
loader.addEventListener("animationend", function() {
this.classList.toggle('load');
}, false);
var clicker = document.querySelector('#logo');
clicker.addEventListener('click', function() {
this.classList.toggle('clickit');
});
</script>
</defs>
<path class="st0" d="M427.4,252.3c0,0,0,77.5-12.3,107.5c-12.9,31.6-51.1,39.6-51.1,39.6s-12.9,3.6-25.3,3.6
c-12.7,0-12.6-7.8-12.7-15.7c0-17.1,0-120.8,0-120.8l-0.1-46.2c0-33-11.4-33.6-12.6-33.7c-1.3,0-12.3,0.6-12.3,33.6v163.2
c0,0,0.6,29.2-25.7,29.9c-7.9,0-15.8,0-23.8,0c-9,0-18,0-26.9,0c-26.3-0.7-25.7-29.9-25.7-29.9V220.2c0-33-11-33.5-12.3-33.6
c-1.3,0-12.6,0.6-12.6,33.7l-0.1,46.2c0,0,0,103.7,0,120.8c0,7.9,0,15.7-12.7,15.7c-12.4,0-25.3-3.6-25.3-3.6s-38.2-8.1-51.1-39.6
c-12.3-30-12.3-107.5-12.3-107.5c0-160.7,38-160.7,63.4-160.7s50.7,26.7,50.7,26.7c11.1-17.9,38.3-31.5,63.4-31.7
c25.1,0.2,52.3,13.8,63.4,31.7c0,0,25.3-26.7,50.7-26.7S427.4,91.6,427.4,252.3z"/>
</svg>
The FULL HTML is
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div style="text-align: center; padding: 150px 0;">
<object>
<embed src="merchery icon.svg" width="40%" height="40%">
</object>
</div>
</body>
</html>

Change CSS to allow for control over DIV position using Javascript

I have adapted code from this page: Filling water animation to suit my needs as you can see below.
CSS
#banner {
width: 150px;
height: 150px;
background:red;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.rotate {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#banner .fill {
-webkit-transform: translate(0, -75px);
}
#banner #waveShape {
-webkit-animation-name: waveAction;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
width:300px;
height: 155px;
opacity:0.9;
fill: #fff;
#-webkit-keyframes waveAction {
0% {
-webkit-transform: translate(150px,0);
}
100% {
-webkit-transform: translate(0, 0);
}
}
HTML
<div id="banner">
<div class="fill">
<svg class="rotate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="155px" viewBox="0 0 300 155" enable-background="new 0 0 300 155" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>
Also...
Please see a screenshot of the output here.
However, I'd like to go one step further and control the level the 'water' is filled via a javascript function.
Usually, I would just control the X and Y position of the DIV that contains the waving SVG but that doesn't appear to work here.
I'd like to use this as a loading infographic but at the moment I can only control the 'water' level using...
}
#banner .fill {
-webkit-transform: translate(0, -75px);
}
I can use values of 0px (0%) to -155px (100%) but ideally I'd like to be able to set a percentage, perhaps by passing a variable in??
NOTE: I've rotated the original SVG because I was struggling to create a new one that worked correctly.
Any help would be much appreciated, I know I'm going to kick myself when I see the solution!! Thankyou.

Get rid of the .rotate and #banner .fill transforms
If you give the svg an id, you can adjust the top margin of the svg using a %
eg
el.style.marginTop = "75%";
Working example: (tested in chrome)
<style type="text/css">
#banner {
width: 150px;
height: 150px;
background:red;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
#water {
margin-top: 99%;
}
#banner #waveShape {
-webkit-animation-name: waveAction;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1s;
width:300px;
height: 155px;
opacity:0.9;
fill: #fff;
}
#keyframes waveAction {
0% {
-webkit-transform: translate(-150px,0);
transform: translate(-150px,0);
}
100% {
-webkit-transform: translate(150, 0);
transform: translate(150, 0);
}
}
</style>
<script>
function fill(percent) {
var el=document.getElementById("water");
if (el == null) {
alert("missing element");
return;
}
el.style.marginTop = (100-percent)+"%";
}
</script>
<div id="banner">
<div class="fill">
<svg id="water" class="rotate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="155px" viewBox="0 0 300 155" enable-background="new 0 0 300 155" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>
<script>
fill(25); //set fill to 25%
</script>
If that doesn't work you could try simply inserting an empty div before the svg and adjusting the height of that.