We Keep Coding

how to destory an animation?

I made a scale animation test:
var btn = document.getElementById('testBtn');
var stopBtn = document.getElementById('testStop');
var runner;
var startSize = 20,
endSize = 80;
const start = startSize === 0 ? 0.001 : startSize / 100;
const end = (endSize / 100) * (1 / start);
var x = 0,
y = 0,
width = 50,
height = 50;
const endss = end * start;
let over = false;
const rect = document.getElementById('svg_1');
const svgEle = SVG(rect);
btn.addEventListener('click', () => {
runner = svgEle.animate().opacity(0).animate().scale(start, start, x, y + height / 2)
.animate().opacity(1)
.animate({
duration: 1500
}).scale(end, end, x, y + height / 2);
})
stopBtn.addEventListener('click', () => {
svgEle.timeline().finish();
setTimeout(() => {
rect.removeAttribute('transform');
}, 200);
})
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0.10/dist/svg.min.js"></script>
<svg width="640" height="480" style="background: lightblue">
<rect width="50" x="0" y="0" height="50" fill="#ff0000" id="svg_1"></rect>
</svg>
<div>
<button id="testBtn">start</button>
</div>
<div style="margin-top: 30px;">
<button id="testStop">restore</button>
</div>
that's what I say.
when I click 'start' button, the rect scale from 20% to 80%,
when I click 'restore' button, restore the rect scale to 1,
but when I click 'start' again , the rect become smaller than before,
.....
...
loop the operates, the rect become more and more small.
so, why the animation still depends on last's result.
how to destory the last animation and start a new scale animation.

A simple way to solve this could be using CSS transition.
An alternative to transition could be using CSS animations.
Example 1
The class names are changed.
Switch between different class names depending on what the element should do. You need to be able to add, remove class names (see a full list of functions here: DOMTokenList) and listen for events when the transition start and end (see more here: GlobalEventHandlers.ontransitionend).
var btn = document.getElementById('testBtn');
var stopBtn = document.getElementById('testStop');
const rect = document.getElementById('svg_1');
btn.addEventListener('click', () => {
rect.classList.add('small');
});
rect.addEventListener('transitionend', e => {
e.target.classList.replace('small', 'large');
});
stopBtn.addEventListener('click', () => {
rect.classList.remove('small', 'large');
})
rect#svg_1 {
transform: scale(1);
transition: all 1.5s;
}
rect#svg_1.small {
transform: scale(.1);
opacity: 0;
}
rect#svg_1.large {
transform: scale(2);
}
<svg width="100" height="100" style="background: lightblue">
<rect width="50" x="0" y="0" height="50" fill="#ff0000" id="svg_1"></rect>
</svg>
<div>
<button id="testBtn">start</button>
</div>
<div style="margin-top: 30px;">
<button id="testStop">restore</button>
</div>
Example 2
The transform property on the element is updated based on something. In this example the changing of value on an range input element updates the value of the transform property. When clicking the restore button the inline style will be removed and the form reset.
var btn = document.getElementById('testBtn');
var stopBtn = document.getElementById('testStop');
const rect = document.getElementById('svg_1');
document.forms.scale.range.addEventListener('change', e => {
rect.style.transform = `scale(${e.target.value})`;
});
stopBtn.addEventListener('click', () => {
rect.removeAttribute('style');
document.forms.scale.reset();
})
rect#svg_1 {
transform: scale(1);
transition: all 1.5s;
}
<svg width="100" height="100" style="background: lightblue">
<rect width="50" x="0" y="0" height="50" fill="#ff0000" id="svg_1"></rect>
</svg>
<form name="scale">
<input name="range" type="range" min="0" max="2" step=".1" value="1" />
</form>
<div style="margin-top: 30px;">
<button id="testStop">restore</button>
</div>

matrixTransform on svg: unexpected behaviour

I have a div containing an SVG image of 300x300 px and a viewbox of 1000x1000.
The image describes a blue rectangle on top of a red one.
When I move the mouse a circle is following the mouse position inside the image:
Everything is perfect except that when I apply a transformation changing perspective and rotation, the mouse pointer and circle center are not anymore matching:
Code is here:
$(function() {
$('#image').mousemove(function(event) {
var svg = document.querySelector('svg');
var pt = svg.createSVGPoint();
pt.x = event.clientX;
pt.y = event.clientY;
pt = pt.matrixTransform(svg.getScreenCTM().inverse());
overlay = document.getElementById('overlay');
$('#overlay').html(
"<circle cx='" + pt.x + "' cy='" + pt.y + "' r='50' stroke='#8f00ff' fill='transparent' stroke-width='10' /></svg>"
);
refresh = $("#overlay").html();
$("#overlay").html( refresh )
});
});
function Transform() {
$('#image').css({
transformOrigin: '500px 500px',
transform: 'perspective(100px) rotateX(5deg)'
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='image' tabindex='0' >
<svg id='svgmap' width='300' height='300' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1000 1000'>
<rect x='0' y='0' width='1000' height='1000' fill='red' />
<rect x='250' y='250' width='500' height='500' stroke='yellow' fill='blue' stroke-width='10' />
<g id='overlay'></g>
</svg>
</div>
<button onclick='Transform()'>Transform</button>
My goal is to preserver matching between the purple circle center and the mouse pointer, even when a transformation is applied to the object.
Is there a way to do it?

In your code #image is a div. In order to make it work you need to apply the transformation to the svg element (#svgmap) and the transformation must be an svg transformation.
$(function() {
$('#svgmap').mousemove(function(event) {
var svg = document.querySelector('svg');
var pt = svg.createSVGPoint();
pt.x = event.clientX;
pt.y = event.clientY;
pt = pt.matrixTransform(svg.getScreenCTM().inverse());
overlay = document.getElementById('overlay');
$('#overlay').html(
"<circle cx='" + pt.x + "' cy='" + pt.y + "' r='50' stroke='#8f00ff' fill='transparent' stroke-width='10' /></svg>"
);
refresh = $("#layer_wafer").html();
$("#layer_wafer").html( refresh )
});
});
function Transform() {
svgmap.setAttributeNS(null,"transform", "skewX(-20) translate(100)");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='image' tabindex='0' >
<svg id='svgmap' width='300' height='300' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1000 1000' transform="">
<rect x='0' y='0' width='1000' height='1000' fill='red' />
<rect x='250' y='250' width='500' height='500' stroke='yellow' fill='blue' stroke-width='10' />
<g id='overlay'></g>
</svg>
</div>
<button onclick='Transform()'>Transform</button>
I understand that you are needing a 3D css transformation but this (at least for now) doesn't work.
This is an article where you can read more about 3d transforms in svg: https://oreillymedia.github.io/Using_SVG/extras/ch11-3d.html In the article you can read: All the 3D transformation functions described in this section should be considered “future”

I've solved the issue in the ugliest possible way. Simply hiding the mouse cursor over the div.
Ugly. But effective.
$(function() {
$('#image').mousemove(function(event) {
var svg = document.querySelector('svg');
var pt = svg.createSVGPoint();
pt.x = event.clientX;
pt.y = event.clientY;
pt = pt.matrixTransform(svg.getScreenCTM().inverse());
overlay = document.getElementById('overlay');
$('#overlay').html(
"<circle cx='" + pt.x + "' cy='" + pt.y + "' r='50' stroke='#8f00ff' fill='transparent' stroke-width='10' /></svg>"
);
refresh = $("#overlay").html();
$("#overlay").html( refresh )
});
});
function Transform() {
$('#image').css({
transformOrigin: '500px 500px',
transform: 'perspective(100px) rotateX(5deg)'
});
}
div#image {
cursor: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='image' tabindex='0' >
<svg id='svgmap' width='300' height='300' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1000 1000'>
<rect x='0' y='0' width='1000' height='1000' fill='red' />
<rect x='250' y='250' width='500' height='500' stroke='yellow' fill='blue' stroke-width='10' />
<g id='overlay'></g>
</svg>
</div>
<button onclick='Transform()'>Transform</button>
There's a little bit of optimization that I have to do to reduce the mouse cursor position gap between the DIV over and any other page element, but it's acceptable to me.

justify multilingual text without the text-align justify property

So I have a multilingual website (currently only in french and english), and there are some places where there is multi line content (titles) a bit like this one :
.banner-heading{
font-size: 37.2px;
}
.banner-second-heading{
font-size: 46px;
}
.banner-third-heading{
font-size: 78px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="flex flexCenter flexColumn col-xs-12 col-md-6 title-fr">
<h1 class="banner-heading">Une solution digitale</h1>
<h1 class="banner-second-heading">pour le bien-être</h1>
<h1 class="banner-third-heading">au travail</h1>
</div>
And the designer wants it to be done without the justify property, because it would deform the font they've chosen.
My problem is I currently do exactly the same for english as well (with different values to keep the text well aligned at beginning and end of lines), but it is already annoying to maintain in the current states, and should we decide to add other languages, it would become almost impossible to have one css PER language, especially with different font-size per line and per language.
So my question is : how do I achieve the same result, in different languages, without using the justify property, given it would deform the chosen font, and without having to play with the font-sizeproperty in the different languages.
Thank you very much for your help, and sorry if this question was already answered, I searched it and didn't find any answer.

I think I under stand your problem, you need to change the size of the font/text to fit the container.
Here is a solution that uses svg and a little JavaScript to achieve that.
First we must use svg to write out the text
<svg width="100%" height="auto" viewBox="0 0 100 20" preserveAspectRatio="xMidYMin slice">
<text class="scalableText" x="0" y="15">Une solution digitale</text>
</svg>
then we have to measure the text and change to viewport to fit the text.
var textElements = document.getElementsByClassName('scalableText');
for(var i = 0;i < textElements.length; i++)
{
var textLength = textElements[i].getComputedTextLength();
textElements[i].parentElement.setAttribute("viewBox", "0 0 " + textLength + " 20");
}
var textElements = document.getElementsByClassName('scalableText');
for(var i = 0;i < textElements.length; i++) {
var textLength = textElements[i].getComputedTextLength();
textElements[i].parentElement.setAttribute("viewBox", "0 0 " + textLength + " 20");
}
<svg width="100%" height="auto" viewBox="0 0 100 20" preserveAspectRatio="xMidYMin slice">
<text class="scalableText" x="0" y="15">Une solution digitale</text>
</svg>
<svg width="100%" height="auto" viewBox="0 0 100 20" preserveAspectRatio="xMidYMin slice">
<text class="scalableText" x="0" y="15">pour le bien-être</text>
</svg>
<svg width="100%" height="auto" viewBox="0 0 100 20" preserveAspectRatio="xMidYMin slice">
<text class="scalableText" x="0" y="15">au travail</text>
</svg>
Example on jsbin

Below uses jQuery to calculate the width of the largest line and then use that width to create a ratio and calculate a new font size
var $wrapper = $('.wrapper');
$wrapper.each(function() {
var $spans = $(this).find('.equalise'),
max = 0,
fontsize = 0;
$spans.each(function() {
var $this = $(this),
width = $this.outerWidth();
if (max < width) {
$spans.removeClass('max');
$this.addClass('max');
max = width;
fontsize = parseInt($this.css('font-size'));
}
});
$spans.not('.max').each(function() {
var $this = $(this),
ratio = max / $this.outerWidth();
$this.css('font-size', fontsize * ratio)
});
});
.equalise {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<span class="equalise">line 1 text</span><br>
<span class="equalise">big font</span><br>
<span class="equalise">a lot more text for to show how this works</span><br>
</div>
<br>
<div class="wrapper">
<span class="equalise">another example</span><br>
<span class="equalise">a line with some text</span><br>
<span class="equalise">short stuff</span><br>
</div>

Works in codepen but not in Wordpress

I'm trying to get this animated svg tree to work in Wordpress. It works fine in codepen, but not at all in a Wordpress page on my localhost.
Can anyone see what is missing/wrong? In the page source code the javascript files are loading.
svg tree
var svg = $("#svg-container");
svg.children().find("path:not(.except)").click(function(e) {
$("#Layer_1 path").removeAttr("style");
$this = $(this);
var bbox = this.getBBox();
var centreX = bbox.x + bbox.width / 2;
var centreY = bbox.y + bbox.height / 2;
$this.css("transform-origin", centreX + 'px ' + centreY + 'px');
$this.css("transform", "scale(4)");
$this.css("stroke", "");
$this.css("fill", "");
this.parentElement.appendChild(this);
})
#svg-container {
width: 500px;
height: 500px;
}
#svg-container svg {
width: 100%;
height: 100%;
}
#font-face {
font-family: "Amaranth";
src: url('https://fonts.googleapis.com/css?family=Amaranth');
}
<div id="svg-container">
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<script type="text/javascript">
< ![CDATA[
]] >
</script>
<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="1247.24px" height="1360.63px" viewBox="0 0 1800 1400" enable-background="new 0 0 1247.24 1360.63" xml:space="preserve">
<g>
<font>
<font-face font-family="Amaranth">
<font-face-src>
<font-face-uri xlink:href="https://fonts.googleapis.com/css?family=Amaranth" />
</font-face-src>
</font-face>
</font>
<text x="10" y="10" font-weight="bold" font-size="75" fill="#3ABDF2" font-family="Amaranth">The tree</text>
<path class="except" fill="#3E6325" d="m1175 917.29c-11.44-1.847-21.576 0.042-32.652 2.825-3.182 0.8-6.644 1.598-10.131 1.985 48.901-29.163 .....continued"
fill="#639357"
id="path5022" /><path
d="m604.1 171.56s-18.18-9.487-18.989-9.087c-0.812 0.401-2.108 1.365-0.619 2.624 1.491 1.259 18.873 8.725 20.208 8.689 1.331-0.037 1.5-1.57-0.6-2.226z"
fill="#3E6325"
stroke="#A64F2C"
stroke-miterlimit="10"
id="path5024" />
</g>
</svg>
</div>
https://codepen.io/paulfadams/pen/PRzMNE?editors=1111

I had this same issue once.
WordPress ships with its own version of the jQuery library.
Try using "jQuery" instead of just "$" sign.
For example:
var svg = $("#svg-container"); should be replaced with var svg = jQuery("#svg-container");

Use jQuery instead of the "$" sign. ex: jQuery("#svg-container");

Triangle progress bar using SVG and Angular JS

I need to do my custom triangle progress bar using SVG and Angular JS. But it seems to be hard to control the green color bar. Can anyone help me?
Here my codes. You may adjust the value in the textbox.
var app = angular.module('ProgressBar', []);
app.controller('ProgressBarCtrl', function($scope) {
$scope.A=365;
$scope.B=275;
$scope.C=33;
$scope.D=276;
$scope.E=366;
$scope.F=157;
});
.bar-content{fill:#D1D3D4;}
.bar-frame{fill:#69BD45;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ProgressBar" ng-controller="ProgressBarCtrl">
<input type="number" ng-model="A" />
<input type="number" ng-model="B" />
<input type="number" ng-model="C" />
<input type="number" ng-model="D" />
<input type="number" ng-model="E" />
<input type="number" ng-model="F" />
<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"
viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<polygon id="XMLID_1_" class="bar-content" points="535,275 36,275 535,97 "/>
<polygon id="XMLID_2_" class="bar-frame" points="{{A}},{{B}} {{C}},{{D}} {{E}},{{F}} "/>
</svg>
</div>

Haven't touched Angular before, so I can't help you there. I can however present an approach suitable for use with either SVG or Canvas. (The canvas implementation is faster, I imagine since it's GPU accelerated)
Since your initial image has an aspect ratio of 2.85 : 1, I chose to use a height of 100px and a width of 285px - I've used the same dimensions for each.
function byId(id){return document.getElementById(id)}
function allByClass(clss){return document.getElementsByClassName(clss)}
function allByTag(tag,parent){return (parent = undefined ? document : parent).getElementsByTagName(tag)}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
byId('slider').style.width = byId('volume').width + 'px';
setVolume(50);
byId('slider').addEventListener('input', onSliderChanged, false);
byId('slider').addEventListener('input', onSlider2Changed, false);
}
function onSliderChanged(evt)
{
var value = this.value;
setVolume(value);
}
function onSlider2Changed(evt)
{
var value = this.value;
setVolumeSVG(value);
}
function setVolumeSVG(percent)
{
var svg = byId('mSvg');
var barWidth = (percent/100) * svg.width.baseVal.value;
var barHeight = (percent/100) * svg.height.baseVal.value;
var msg = "0,"+svg.height.baseVal.value + " "
+ barWidth + "," + (svg.height.baseVal.value-barHeight) + " "
+ barWidth + "," + svg.height.baseVal.value;
allByClass('barSlider')[0].setAttribute('points', msg);
}
//
//
// (2)
//
//
//
//
// (1) (3)
function setVolume(percent)
{
var can = byId('volume');
var ctx = can.getContext('2d');
ctx.fillStyle = "rgba(0,0,0,0)";
ctx.fillRect(0,0,can.width,can.height);
ctx.fillStyle = "#d1d3d4";
ctx.moveTo(0,can.height);
ctx.beginPath();
ctx.lineTo(can.width, 0);
ctx.lineTo(can.width,can.height);
ctx.lineTo(0,can.height);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#69bd45";
ctx.moveTo(0,can.height);
ctx.lineTo( (percent/100)*can.width, can.height - ( (percent/100)*can.height) );
ctx.lineTo( (percent/100)*can.width, can.height );
ctx.lineTo(0,can.height);
ctx.fill()
}
<canvas width=285 height=100 id='volume'></canvas><br>
<input type='range' min='0' max='100' step='1' value=50 id='slider'/>
<hr/>
<svg id='mSvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 100" width=285 height=100>
<g>
<polygon class="barFrame" points="0,100 285,100 285,0"></polygon>
<polygon class='barSlider' points="0,100 143,100 143,50"></polygon>
</g>
<style>
.barFrame{ fill: #d1d3d4; }
.barSlider{ fill: #69bd45; }
</style>
</svg>