119 lines
4.9 KiB
HTML
119 lines
4.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>SVG responsive path animation | anime.js</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<meta property="og:title" content="anime.js">
|
||
|
|
<meta property="og:url" content="https://animejs.com">
|
||
|
|
<meta property="og:description" content="Javascript Animation Engine">
|
||
|
|
<meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="twitter:title" content="anime.js">
|
||
|
|
<meta name="twitter:site" content="@juliangarnier">
|
||
|
|
<meta name="twitter:description" content="Javascript Animation Engine">
|
||
|
|
<meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
|
||
|
|
<link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
|
||
|
|
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
||
|
|
<link href="../assets/css/animejs.css" rel="stylesheet">
|
||
|
|
<link href="../assets/css/documentation.css" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
position: absolute;
|
||
|
|
overflow: hidden;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.container > svg {
|
||
|
|
width: 100%;
|
||
|
|
box-shadow: 0px 0px 1px 1px red;
|
||
|
|
overflow: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dom-el {
|
||
|
|
position: absolute;
|
||
|
|
top: -1rem;
|
||
|
|
left: -1rem;
|
||
|
|
width: 2rem;
|
||
|
|
height: 2rem;
|
||
|
|
border: 2px solid currentColor;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h2>No specified width</h2>
|
||
|
|
<div class="container no-specified-width">
|
||
|
|
<svg viewBox="0 0 256 112">
|
||
|
|
<path id="noSpecifiedWidth" fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
|
||
|
|
<rect class="rect-el" fill="none" stroke="yellow" stroke-width="2" x="-10" y="-10" width="20" height="20"/>
|
||
|
|
</svg>
|
||
|
|
<div class="dom-el color-green"></div>
|
||
|
|
</div>
|
||
|
|
<h2>Specified width</h2>
|
||
|
|
<div class="container specified-width">
|
||
|
|
<svg viewBox="0 0 256 112" width="200" height="200">
|
||
|
|
<path id="specifiedWidth" fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
|
||
|
|
<rect class="rect-el" fill="none" stroke="yellow" stroke-width="2" x="-10" y="-10" width="20" height="20"/>
|
||
|
|
</svg>
|
||
|
|
<div class="dom-el color-green"></div>
|
||
|
|
</div>
|
||
|
|
<h2>preserveAspectRatio with specified width</h2>
|
||
|
|
<div class="container preserveAspectRatio">
|
||
|
|
<svg viewBox="0 0 256 112" width="200" height="200" preserveAspectRatio="xMidYMid slice">
|
||
|
|
<path id="preserveAspectRatio" fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
|
||
|
|
<rect class="rect-el" fill="none" stroke="yellow" stroke-width="2" x="-10" y="-10" width="20" height="20"/>
|
||
|
|
</svg>
|
||
|
|
<div class="dom-el color-green"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script type="module">
|
||
|
|
import anime from '../../src/index.js';
|
||
|
|
|
||
|
|
const path = anime.path('#noSpecifiedWidth');
|
||
|
|
anime({
|
||
|
|
targets: ['.no-specified-width .dom-el', '.no-specified-width .rect-el'],
|
||
|
|
translateX: path('x'),
|
||
|
|
translateY: path('y'),
|
||
|
|
rotate: path('angle'),
|
||
|
|
duration: 3000,
|
||
|
|
loop: true,
|
||
|
|
easing: 'linear'
|
||
|
|
});
|
||
|
|
|
||
|
|
const specifiedWidthPath = anime.path('#specifiedWidth');
|
||
|
|
anime({
|
||
|
|
targets: ['.specified-width .dom-el', '.specified-width .rect-el'],
|
||
|
|
translateX: specifiedWidthPath('x'),
|
||
|
|
translateY: specifiedWidthPath('y'),
|
||
|
|
rotate: specifiedWidthPath('angle'),
|
||
|
|
duration: 3000,
|
||
|
|
loop: true,
|
||
|
|
easing: 'linear'
|
||
|
|
});
|
||
|
|
|
||
|
|
const preserveAspectRatioPath = anime.path('#preserveAspectRatio');
|
||
|
|
anime({
|
||
|
|
targets: ['.preserveAspectRatio .dom-el', '.preserveAspectRatio .rect-el'],
|
||
|
|
translateX: preserveAspectRatioPath('x'),
|
||
|
|
translateY: preserveAspectRatioPath('y'),
|
||
|
|
rotate: preserveAspectRatioPath('angle'),
|
||
|
|
duration: 3000,
|
||
|
|
loop: true,
|
||
|
|
easing: 'linear'
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|