I have been running around in circles
I use the Web Animation API transform:translate() to make my player run around the bases.
runto("first").then(() => runto("second")); does the correct animation,
but then deletes the first/previous translate to first base,
thus my player ends up in the wrong location
I have tried every combination of
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/iterationComposite
Is it at all possible to preserve all the translates on one element?
JSFiddle playground: https://jsfiddle.net/WebComponents/8df2qsop/
let field = document.getElementById("FIELD");
let player = field.getElementById("player");
function getCenter(el , { left, top, width, height } = el.getBoundingClientRect()) {
let point = Object.assign(field.createSVGPoint(),{ x : left + width / 2, y : top + height / 2 }).matrixTransform(field.getScreenCTM().inverse());
return { cx:~~point.x, cy:~~point.y };
}
function runto(destination) {
let {cx:playerX,cy:playerY} = getCenter(player);
let {cx:baseX ,cy:baseY } = getCenter(field.getElementById(destination));
let translateX = baseX - playerX;
let translateY = baseY- playerY;
let track = `<line x1="${playerX}" y1="${playerY}" x2="${baseX}" y2="${baseY}" stroke-width="10" stroke="black"/>`;
field.insertAdjacentHTML("beforeend",track);
return player.animate([{
//transform: `translate(${0}px,${0}px)`
}, { transform: `translate(${translateX}px,${translateY}px)` }],
{ duration:500, fill:"forwards", composite:"add" }
).finished; // return Promise
}
runto("first").then(() => runto("second"));
<style>
#FIELD { background: lightgreen; width: 150px; margin: 20px }
</style>
<svg id=FIELD viewBox="0 0 250 250" transform="rotate(45)">
<g fill="brown">
<path id="home" d="M 150 150 h 80 v 80 h -80 v -80z" fill="green"/>
<path id="first" d="M 150 20 h 80 v 80 h -80 v -80z"/>
<path id="second" d="M 20 20 h 80 v 80 h -80 v -80z"/>
<path id="third" d="M 20 150 h 80 v 80 h -80 v -80z"/>
</g>
<circle id="player" cx="190" cy="190" r="30" fill="gold"/>
</svg>
You could call Animation#commitStyles() after the animation completes, so that its state is "written" to your player.
You now need to come back to the default composite: "replace" option, and you also need to modify your initial player settings so that it's positioned using CSS translate() instead of using its cx and cy values (or you could also modify your calculations so they return relative positions instead).
let field = document.getElementById("FIELD");
let player = field.getElementById("player");
function getCenter(el, { left, top, width, height } = el.getBoundingClientRect()) {
let point = Object.assign(field.createSVGPoint(), {
x: left + width / 2,
y: top + height / 2
}).matrixTransform(field.getScreenCTM().inverse());
return {
cx: ~~point.x,
cy: ~~point.y
};
}
async function runto(destination) {
let { cx: playerX, cy: playerY } = getCenter(player);
let { cx: baseX, cy: baseY } = getCenter(field.getElementById(destination));
let translateX = baseX - playerX;
let translateY = baseY - playerY;
let track = `<line x1="${playerX}" y1="${playerY}" x2="${baseX}" y2="${baseY}" stroke-width="10" stroke="black"/>`;
field.insertAdjacentHTML("beforeend", track);
const anim = player.animate([{
transform: `translate(${baseX}px,${baseY}px)`
}], {
duration: 500,
fill: "forwards"
});
await anim.finished;
anim.commitStyles(); // write the current state to the animated element
anim.cancel(); // no need to keep it around anymore
}
runto("first").then(() => runto("second"));
<style>
#FIELD {
background: lightgreen;
width: 150px;
margin: 20px
}
</style>
<svg id=FIELD viewBox="0 0 250 250" transform="rotate(45)">
<g fill="brown">
<path id="home" d="M 150 150 h 80 v 80 h -80 v -80z" fill="green"/>
<path id="first" d="M 150 20 h 80 v 80 h -80 v -80z"/>
<path id="second" d="M 20 20 h 80 v 80 h -80 v -80z"/>
<path id="third" d="M 20 150 h 80 v 80 h -80 v -80z"/>
</g>
<circle id="player" cx="0" cy="0" r="30" style="transform:translate(190px, 190px)" fill="gold"/>
</svg>
I am developing a reactJS app.
I need to render an svg circle and when I click it it spawns n equal slices inside.
I created the slices, here is the code
renderSlices = () => {
let slices = [];
const numberOfSlice = 12; //number of slices
for (let i = 0; i < numberOfSlice; i++) {
slices.push({ percent: 1 / numberOfSlice, color: 'gray' });
}
let cumulativePercent = 0;
let arr = [];
arr = slices.map(slice => {
const [startX, startY] = this.getCoordinatesForPercent(cumulativePercent.toString());
cumulativePercent += slice.percent;
const [endX, endY] = this.getCoordinatesForPercent(cumulativePercent.toString());
const largeArcFlag = slice.percent > 0.5 ? 1 : 0;
const pathData = [
`M ${startX} ${startY}`, // Move
`A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
'L 0 0', // Line
].join(' ');
return <path d={pathData} fill={slice.color} key={pathData} />;
});
return arr;
}
getCoordinatesForPercent(percent: string) {
const x = Math.cos(2 * Math.PI * parseFloat(percent));
const y = Math.sin(2 * Math.PI * parseFloat(percent));
return [x, y];
}
Render method:
<div className="container">
<svg
height="306"
width="306"
viewBox="-1 -1 2 2"
>
{/* <circle cx="150" cy="150" r="148" stroke="black"
strokeWidth="2" fill={"transparent"}/> */}
{this.renderSlices()}
</svg>
</div>
The problem is when I remove the comment from the circle tag and I remove the viewBox, only the circle show up, and when I comment the circle tag and put the viewBox, only the slices show up.
I would like to have the circle with a visible stroke and inside it the slices.
Any help please ?
EDIT:
<svg height="306" width="306" viewBox="0 0 306 306">
<path d="M 1 0 A 1 1 0 0 1 0.8660254037844387 0.49999999999999994 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.8660254037844387 0.49999999999999994 A 1 1 0 0 1 0.5000000000000001 0.8660254037844386 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.5000000000000001 0.8660254037844386 A 1 1 0 0 1 6.123233995736766e-17 1 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 6.123233995736766e-17 1 A 1 1 0 0 1 -0.4999999999999998 0.8660254037844387 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.4999999999999998 0.8660254037844387 A 1 1 0 0 1 -0.8660254037844385 0.5000000000000003 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.8660254037844385 0.5000000000000003 A 1 1 0 0 1 -1 5.66553889764798e-16 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -1 5.66553889764798e-16 A 1 1 0 0 1 -0.866025403784439 -0.4999999999999994 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.866025403784439 -0.4999999999999994 A 1 1 0 0 1 -0.5000000000000004 -0.8660254037844385 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.5000000000000004 -0.8660254037844385 A 1 1 0 0 1 -1.8369701987210297e-16 -1 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -1.8369701987210297e-16 -1 A 1 1 0 0 1 0.5000000000000001 -0.8660254037844386 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.5000000000000001 -0.8660254037844386 A 1 1 0 0 1 0.8660254037844388 -0.49999999999999967 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.8660254037844388 -0.49999999999999967 A 1 1 0 0 1 1 -2.4492935982947064e-16 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
</svg>
getCoordinatesForPercent(percent: string, radius: number, circle: {x: number, y: number}) {
const x = radius * Math.cos(2 * Math.PI * parseFloat(percent)) + circle.x;
const y = radius * Math.sin(2 * Math.PI * parseFloat(percent)) + circle.y;
return [x, y];
}
Multiply with radius and add the circle coordinates
and change A 1 1 0 ${largeArcFlag} to A ${radius} ${radius} 0 ${largeArcFlag} and 'L 0 0' to 'L ${circle.x} ${circle.y}'
I'm looking into ways to calculate path.getTotalLength() in Node.js and it seems that a polyfill is not available. So far I managed to compute all other pathCommands except A.
For instance, knowing last X and Y from M segment, and also having all the A segment values, how to determine the length of this path?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M8 15 A7 7 0 1 0 8 1">
</svg>
Thank you
MDN has some great documentation in regards to the various path commands.
MDN > SVG Tutorial > Paths
Here is how you decompose the provided path commands:
M 8 15 = Move To (Absolute)
x = 8
y = 15
A 7 7 0 1 0 8 1 = Arc (Absolute)
rx = 7
ry = 7
x-axis-rotation = 0
large-arc-flag = 1
sweep-flag = 0
x = 8
y = 1
I followed this Mathematics Exchange post to compute the arc length, given the states path commands. Since the x and y radii of your arc are equal, this is a bit easier.
Note: I am not sure what you would need to do if they are different.
const x1 = 8, y1 = 15;
const x2 = 8, y2 = 1;
const r = 7; // Since rx === ry, this is a bit easier
const d = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
const theta = Math.acos(1 - (Math.pow(d, 2) / (2 * Math.pow(r, 2))));
const arcLength = theta * r;
console.log(arcLength); // Arc Length = 21.9911
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="
M 8 15
A 7 7 0 1 0 8 1
" fill="none" stroke="black" stroke-width="2" />
<!-- Move to and begin arc at (8, 15) -->
<circle cx="8" cy="15" r="1" stroke="none" fill="red" />
<!-- End arc at (8, 1) -->
<circle cx="8" cy="1" r="1" stroke="none" fill="cyan" />
<!-- Radius of (7, 7) -->
<circle cx="15" cy="7.5" r="1" stroke="none" fill="lime" />
<!-- Center -->
<circle cx="8" cy="7.5" r="1" stroke="none" fill="gold" />
</svg>
I have an svg
<svg class="svg_el" viewbox="0 0 100 100" preserveaspectratio="none">
<path class="overlay_path">
<animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0; M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0; M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0; M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" fill="freeze" repeatCount="1"></animate>
<animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0; M 0 25 C 50 15 50 60 100 50 V 100 H 0; M 0 50 C 50 50 50 85 100 80 V 100 H 0; M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="0.73s" fill="freeze" repeatCount="1"></animate>
</path>
<path class="overlay_path">
<animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0; M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0; M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0; M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" begin="0.1s" fill="freeze" repeatCount="1"></animate>
<animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0; M 0 25 C 50 15 50 60 100 50 V 100 H 0; M 0 50 C 50 50 50 85 100 80 V 100 H 0; M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="0.63s" fill="freeze" repeatCount="1"></animate>
</path>
<path class="overlay_path">
<animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0; M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0; M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0; M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" begin="0.2s" fill="freeze" repeatCount="1"></animate>
<animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0; M 0 25 C 50 15 50 60 100 50 V 100 H 0; M 0 50 C 50 50 50 85 100 80 V 100 H 0; M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="0.53s" fill="freeze" repeatCount="1"></animate>
</path>
</svg>
I'm trying to use it as a page transition so that it covers the entire screen before the next page loads but the problem I'm having is that even with SVGSVGELEMENT.getCurrentTime(), I can't seem to pause it at the correct spot and so the svg will pause at different points.
$('.the_box').removeClass('loaded');
$('.ccs').load('/wordpress/wp-content/themes/Tsunami-Waves-PHP/img/waves.svg', function() {
var svgDoc = $('.ccs svg');
var animWatch = setInterval(function() {
if (svgDoc[0].getCurrentTime() > 0.56 && !($('.the_box').hasClass('loaded'))) {
svgDoc[0].pauseAnimations();
console.log(svgDoc[0].getCurrentTime());
} else if (svgDoc[0].getCurrentTime() > 0.56 && $('.the_box').hasClass('loaded')) {
svgDoc[0].unpauseAnimations();
$('.the_box').siblings('.slider-transition').html($('.the_box').html());
$('.slider-transition').children('.slider-transition').unwrap();
$('video').trigger('play');
clearInterval(animWatch);
}
}, 10);
});
// $('#holder').load(function(){ var imgcount = $('#holder img').length; $('#holder img').load(function(){ imgcount--; if (imgcount == 0) { /* now they're all loaded, let's display them! */ } }); });
$('.the_box').load(href + ' .slider-transition', function() {
var svgDoc = $('.ccs svg');
$(this).addClass('loaded');
$('.woocommerce-product-gallery').each(function() {
$(this).wc_product_gallery();
});
slideShowInit();
initParalax();
});
Even with the interval being 10 (or even 1), the pause will occur at completely different times and can't seem to catch it at the correct moment so I figure my best bet is to convert the svg into jQuery so that I have better control of it, is there an easy way of doing this or do I have to learn up on how to do it?
If I understand correctly what you want to achieve, the first animation for each path should run immediately, and the second only when the new page has loaded. If that is the case, you can do this explicitly.
Set an id="reveal" and begin="indefinite" for the earliest of the second animations, and start it with $('#reveal')[0].beginElementAt(). The other two animations can then be started with relative begin times: begin="reveal.begin+0.1s".
<svg class="svg_el" viewbox="0 0 100 100" preserveaspectratio="none">
<path class="overlay_path">
<animate attributeName="d" values="..." dur="0.4s" fill="freeze"></animate>
<animate attributeName="d" values="...." dur="0.4s" begin="reveal.begin+0.2s" fill="freeze"></animate>
</path>
<path class="overlay_path">
<animate attributeName="d" values="..." dur="0.4s" begin="0.1s" fill="freeze"></animate>
<animate attributeName="d" values="" dur="0.4s" begin="reveal.begin+0.1s" fill="freeze"></animate>
</path>
<path class="overlay_path">
<animate attributeName="d" values="" dur="0.4s" begin="0.2s" fill="freeze"></animate>
<animate id="reveal" attributeName="d" values="..." dur="0.4s" begin="indefinite" fill="freeze"></animate>
</path>
</svg>
For the start time of the second group of animations you now need to wait for the load event. If the first group of animations is still running, you can delay the start time for the second. The beginEvent triggers the other actions.
$('.the_box').removeClass('loaded');
var svgLoad = $.Deferred(), sliderLoad = $.Deferred();
// first animations start immediatly after svg load
$('.ccs').load('/wordpress/wp-content/themes/Tsunami-Waves-PHP/img/waves.svg', svgLoad.resolve);
$('.the_box').load(href + ' .slider-transition', sliderLoad.resolve);
// wait for both load events
$.when(svgLoad, sliderLoad).then(function() {
var svgDoc = $('.ccs svg');
// delay start time of second animations if load is earlier than 0.53s
var startTime = Math.max(0.53, svgDoc[0].getCurrentTime());
var reveal = $('#reveal');
// link DOM change and video play to animation beginEvent
reveal.on('beginEvent', function () {
$('.the_box').siblings('.slider-transition').html($('.the_box').html());
$('.slider-transition').children('.slider-transition').unwrap();
$('video').trigger('play');
});
reveal[0].beginElementAt(startTime);
$(this).addClass('loaded');
$('.woocommerce-product-gallery').each(function() {
$(this).wc_product_gallery();
});
slideShowInit();
initParalax();
});
I want to connect two SVG points (e.g. the centers of two circles) using arcs. If there is only one connection, the line (<path>) will be straight. If there are two connections, both will be rounded and will be symmetrical, this way:
So, in fact, there are few rules:
Everything should be symmetrical to to the imaginary line that connects the two points.
From 1, it's obvious that if the number of connections is:
odd: we do not display the straight line
even: we display the straight line
There should be a value k which defines the distance between two connections between same points.
The tangent that goes through the middle of the elliptical arc should be parallel with the straight line that connects the two points. And obviously, the middle of the line will be perpendicular to the tangent.
I'm struggling to get a formula to calculate the A parameters in the <path> element.
What I did until now is:
<path d="M100 100, A50,20 0 1,0 300,100" stroke="black" fill="transparent"/>
M100 100 is clear: that's the starting point (move to 100,100)
Last two numbers are also clear. The path ends in 300,100
I also saw that if I put 0 instead of 20, I obtain a straight line.
If I replace 1,0 with 1,1, the path is flipped.
What I don't know is how to calculate the A parameters. I read the docs, but the imagine is still unclear to me. How to calculate these values?
svg {
width: 100%;
height: 100%;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<?xml version="1.0" standalone="no" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- Connect A(100,100) with B(300, 100) -->
<path d="M100 100, A50,0 0 1,0 300,100" stroke="black" fill="transparent" />
<path d="M100 100, A50,20 0 1,0 300,100" stroke="black" fill="transparent" />
<path d="M100 100, A50,20 0 1,1 300,100" stroke="black" fill="transparent" />
<path d="M100 100, A50,30 0 1,0 300,100" stroke="black" fill="transparent" />
<path d="M100 100, A50,30 0 1,1 300,100" stroke="black" fill="transparent" />
<!-- A(100, 100) B(300, 400) -->
<path d="M100 100, A50,0 57 1,0 300,400" stroke="black" fill="transparent" />
<path d="M100 100, A50,20 57 1,0 300,400" stroke="black" fill="transparent" />
<path d="M100 100, A50,20 57 1,1 300,400" stroke="black" fill="transparent" />
</svg>
</body>
</html>
I'm using SVG.js to create the paths.
You're making life very difficult for yourself by requiring circular arcs.
If you use quadratic curves instead, then the geometry becomes very simple — just offset the central X coordinate by half the difference in Y coordinates, and vice versa.
function arc_links(dwg,x1,y1,x2,y2,n,k) {
var cx = (x1+x2)/2;
var cy = (y1+y2)/2;
var dx = (x2-x1)/2;
var dy = (y2-y1)/2;
var i;
for (i=0; i<n; i++) {
if (i==(n-1)/2) {
dwg.line(x1,y1,x2,y2).stroke({width:1}).fill('none');
}
else {
dd = Math.sqrt(dx*dx+dy*dy);
ex = cx + dy/dd * k * (i-(n-1)/2);
ey = cy - dx/dd * k * (i-(n-1)/2);
dwg.path("M"+x1+" "+y1+"Q"+ex+" "+ey+" "+x2+" "+y2).stroke({width:1}).fill('none');
}
}
}
function create_svg() {
var draw = SVG('drawing').size(300, 300);
arc_links(draw,50,50,250,50,2,40);
arc_links(draw,250,50,250,250,3,40);
arc_links(draw,250,250,50,250,4,40);
arc_links(draw,50,250,50,50,5,40);
draw.circle(50).move(25,25).fill('#fff').stroke({width:1});
draw.circle(50).move(225,25).fill('#fff').stroke({width:1});
draw.circle(50).move(225,225).fill('#fff').stroke({width:1});
draw.circle(50).move(25,225).fill('#fff').stroke({width:1});
}
create_svg();
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.2/svg.min.js"></script>
<div id="drawing"></div>
For drawing SVG path's arc you need 2 points and radius, there are 2 points and you just need to calculate radius for given distances.
Formula for radius:
let r = (d, x) => 0.125*d*d/x + x/2;
where:
d - distance between points
x - distance between arcs
it derived from Pythagorean theorem:
a here is a half of distance between points
let r = (d, x) => !x?1e10:0.125*d*d/x + x/2;
upd();
function upd() {
let n = +count.value;
let s = +step.value/10;
let x1 = c1.getAttribute('cx'), y1 = c1.getAttribute('cy');
let x2 = c2.getAttribute('cx'), y2 = c2.getAttribute('cy');
let dx = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
paths.innerHTML = [...Array(n)].map((_, i) => [
n%2&&i===n-1?0:1+parseInt(i/2),
i%2
]).map(i => `<path d="${[
'M', x1, y1,
'A', r(dx, s*i[0]), r(dx, s*i[0]), 0, 0, i[1], x2, y2
].join(' ')}"></path>`).join('');
}
<input id="count" type="range" min=1 max=9 value=5 oninput=upd() >
<input id="step" type="range" min=1 max=200 value=100 oninput=upd() >
<svg viewbox=0,0,300,100 stroke=red fill=none >
<circle id=c1 r=10 cx=50 cy=60></circle>
<circle id=c2 r=10 cx=250 cy=40></circle>
<g id=paths></g>
</svg>
Here is a solution that uses arcs, as asked for, rather than quadratic curves.
// Internal function
function connectInternal(x1,y1,x2,y2,con){
var dx=x2-x1
var dy=y2-y1
var dist=Math.sqrt(dx*dx+dy*dy)
if(dist==0 || con==0){
return "M"+x1+","+y1+"L"+x2+","+y2
}
var xRadius=dist*0.75
var yRadius=dist*0.3*(con*0.75)
var normdx=dx/dist
if(normdx<-1)normdx=-1
if(normdx>1)normdx=1
var angle=Math.acos(normdx)*180/Math.PI
if(x1>x2){
angle=-angle
}
return "M"+x1+","+y1+"A"+xRadius+","+yRadius+","+
angle+",00"+x2+","+y2+
"M"+x1+","+y1+"A"+xRadius+","+yRadius+","+
angle+",01"+x2+","+y2
}
// Returns an SVG path that represents
// "n" connections between two points.
function connect(x1,y1,x2,y2,n){
var ret=""
var con=n
if(con%2==1){
ret+=connectInternal(x1,y1,x2,y2,con)
con-=1
}
for(var i=2;i<=con;i+=2){
ret+=connectInternal(x1,y1,x2,y2,i)
}
return ret
}