How to scale individual SVG elements with jQuery/Javascript? - javascript

I have a SVG with randomly dispersed squares on the page that scale up when the user scrolls past a certain point.
The issue I am having is that once the squares scale, it creates a horizontal scroll bar as if the entire SVG block scales, rather than the individual elements.
Is it possible to target each individual rect to scale in place with an easing motion rather than bluntly changing size (to give the impression that it's growing) so that it also doesn't stretch out the page, and then once the user continues to scroll, it reverts back to the original size?
Here is my: Updated JSFiddle
HTML:
<div class="move-wrapper">
<svg class="enlarge" 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="82 -117 1363 770" style="enable-background:new 82 -117 1363 770;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#A7A9AC;stroke-width:5;stroke-miterlimit:10;}
</style>
<rect x="153" y="-34" class="st0" width="22.1" height="22.1"/>
<rect x="335.5" y="55.5" class="st0" width="22.1" height="22.1"/>
<rect x="529.5" y="343.1" class="st0" width="22.1" height="22.1"/>
<rect x="153.6" y="464.4" class="st0" width="22.1" height="22.1"/>
<rect x="976.5" y="166.4" class="st0" width="22.1" height="22.1"/>
<rect x="1288.3" y="-12.1" class="st0" width="22.1" height="22.1"/>
<rect x="941.9" y="575.3" class="st0" width="22.1" height="22.1"/>
<rect x="1355.9" y="434.9" class="st0" width="22.1" height="22.1"/>
</svg>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
CSS:
.move-wrapper {
width:100%;
position:absolute;
}
.spacer {
height:500px;
}
JS:
$(function() {
$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 20) {
$(".enlarge").css({"-moz-transform": "scale(1.5,1.5)", "webkit-transform": "scale(1.5,1.5)"});
$(this).off('scroll');
}
if (scrollPosition >= 40) {
$(".enlarge").css({"-moz-transform": "scale(1,1)", "webkit-transform": "scale(1,1)"});
$(this).off('scroll');
}
});
});


Here's one possible solution: http://jsfiddle.net/_jered/0yy0nLam/
Move stylings into CSS whenever possible.
Wrap each rect in an svg to control positioning independent of scale.
Offset each rect by half it's width so that the transform is centered.
One thing to beware of is that I'm not sure if x and y attributes are part of the spec for svg elements. Seems to work in Chrome but not might be consistent across browsers. A more solid approach which I was too lazy to implement was to do a CSS transform instead.

Related

SVG animation on scroll once

Hi everyone I can program, and I saw a few weeks ago, that SVG animations are pretty useful!
Now my question:
I want to animate text like this website: https://weaintplastic.com/ I do not want the other things, just the Animation! I tried a lot of things, Exported via Illustrator a svg but it did not worked out. I do not want to use, any tool from github!
My assumption is:
I have to animate any letter in a Word (like the website), such that I have to know the paths from the svg! But this makes problem! How can I get a animation like this? Lets assume I want the word for ABOUT ME for example, how can I achieve CSS and JS which does the job for any svg if I have the path, or do I have to do for every Letter an own CSS and JS?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 315 45" style="enable-background:new 0 0 315 45;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
</style>
<g>
<path d="M78.55,26.83l-2,5.75h-2.57l6.53-18.3h2.99l6.56,18.3h-2.65l-2.05-5.75H78.55z M84.85,24.98l-1.88-5.27
c-0.43-1.19-0.71-2.28-1-3.34h-0.06c-0.29,1.09-0.6,2.2-0.97,3.31l-1.88,5.29H84.85z"/>
<path d="M92.61,32.58c0.06-0.9,0.11-2.23,0.11-3.39V13.31h2.48v8.25h0.06c0.88-1.47,2.48-2.42,4.71-2.42c3.42,0,5.85,2.71,5.82,6.7
c0,4.7-3.11,7.03-6.19,7.03c-2,0-3.59-0.73-4.62-2.47h-0.09l-0.11,2.17H92.61z M95.2,27.32c0,0.3,0.06,0.6,0.11,0.87
c0.48,1.66,1.94,2.8,3.76,2.8c2.62,0,4.19-2.04,4.19-5.05c0-2.63-1.43-4.89-4.11-4.89c-1.71,0-3.31,1.11-3.82,2.93
c-0.06,0.27-0.14,0.6-0.14,0.98V27.32z"/>
<path d="M121.44,25.9c0,4.86-3.54,6.98-6.87,6.98c-3.74,0-6.62-2.61-6.62-6.76c0-4.4,3.02-6.98,6.84-6.98
C118.75,19.15,121.44,21.89,121.44,25.9z M110.48,26.04c0,2.88,1.74,5.05,4.19,5.05c2.4,0,4.19-2.14,4.19-5.1
c0-2.23-1.17-5.05-4.14-5.05S110.48,23.54,110.48,26.04z"/>
<path d="M136.15,29c0,1.36,0.03,2.55,0.11,3.58h-2.22l-0.14-2.14h-0.06c-0.66,1.06-2.11,2.44-4.56,2.44
c-2.17,0-4.76-1.14-4.76-5.75v-7.68h2.51v7.27c0,2.5,0.8,4.18,3.08,4.18c1.68,0,2.85-1.11,3.31-2.17c0.14-0.35,0.23-0.79,0.23-1.22
v-8.06h2.51V29z"/>
<path d="M143.33,15.67v3.77h3.59v1.82h-3.59v7.09c0,1.63,0.48,2.55,1.88,2.55c0.66,0,1.14-0.08,1.45-0.16l0.11,1.79
c-0.48,0.19-1.25,0.33-2.22,0.33c-1.17,0-2.11-0.35-2.71-1c-0.71-0.71-0.97-1.87-0.97-3.42v-7.17h-2.14v-1.82h2.14v-3.15
L143.33,15.67z"/>
<path d="M172.08,24.55c-0.14-2.55-0.31-5.62-0.29-7.9h-0.09c-0.66,2.14-1.45,4.42-2.42,6.95l-3.39,8.88h-1.88l-3.11-8.71
c-0.91-2.58-1.68-4.94-2.22-7.11h-0.06c-0.06,2.28-0.2,5.35-0.37,8.09l-0.51,7.84h-2.37l1.34-18.3h3.17l3.28,8.85
c0.8,2.25,1.46,4.26,1.94,6.16h0.09c0.48-1.85,1.17-3.86,2.02-6.16l3.42-8.85h3.17l1.2,18.3h-2.42L172.08,24.55z"/>
<path d="M188.76,24h-7.47v6.6h8.33v1.98H178.8v-18.3h10.38v1.98h-7.9v5.78h7.47V24z"/>
</g>
<g>
<rect x="54.72" y="8.99" class="st0" width="69.62" height="7.96"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
I tried figma and svgator, and so on, but this is not useful, since I want to DO the ANIMATION WHEN I SCROLL on the section. (Once like the website).
I am sorry if my question is not Perfect, I tried my best to be precise as possible, and searched first on the Forum before I asked.

The technique has to be a combination with SVGGeometryElement.getTotalLength, stroke-dasharray, stroke-dashoffset, and the Intersection Observer API.
The example you provided has a lot more complex SVG elements than your own example. If you inspect the SVG you'll see that each letter consists of 1 or more <polygon> elements that are being animated. Being that your own SVG is a bit simpler I've built the example below on it.
First thing that is important is that the animation in the example animates the stroke property of each polygon. They do that by calculating the entire length of each path and setting both the stroke-dasharray and stroke-dashoffset properties with that total calculated path length. This will push the stroke out of the svg to be invisible, setting up the animation. (Each path has a different length, so setting the properties manually is a tedious job, let JS do it).
Then use the Intersection Observer API to determine when certain elements come into view. In this case I've chosen to watch for whole sections to come into view. Whenever a section enters the viewport, it will add an animate class to the section. In CSS I've defined that the class will trigger an animation that will change the stroke-dashoffset property. This will cause the stroke to animate back into the SVG.
const paths = document.querySelectorAll('svg path');
const sections = document.querySelectorAll('section');
paths.forEach((path, index) => {
const length = path.getTotalLength();
path.style.strokeDashoffset = `${length}px`;
path.style.strokeDasharray = `${length}px`;
path.style.animationDelay = `${index * 250}ms`;
});
const onInterSection = (entries, observer) => {
for (const { isIntersecting, target } of entries) {
if (isIntersecting) {
target.classList.add('animate');
observer.unobserve(target);
}
}
};
const observer = new IntersectionObserver(onInterSection);
for (const section of sections) {
observer.observe(section);
}
.st0 {
fill: none;
}
section {
display: grid;
place-items: center;
height: 75vh;
}
section:first-of-type {
background-color: #f7f7f7;
}
section:nth-of-type(2) {
background-color: #d7d7d7;
}
section:nth-of-type(2) {
background-color: #e7e7e7;
}
path {
stroke: black;
stroke-width: 1px;
fill: none;
}
section.animate path {
animation: letter 2s 1s forwards ease-out;
}
#keyframes letter {
to {
stroke-dashoffset: 0;
}
}
<section>
<span>Scroll down to animation</span>
</section>
<section>
<span>A bit further</span>
</section>
<section>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 315 45" style="enable-background:new 0 0 315 45;" xml:space="preserve">
<path d="M78.55,26.83l-2,5.75h-2.57l6.53-18.3h2.99l6.56,18.3h-2.65l-2.05-5.75H78.55z M84.85,24.98l-1.88-5.27
c-0.43-1.19-0.71-2.28-1-3.34h-0.06c-0.29,1.09-0.6,2.2-0.97,3.31l-1.88,5.29H84.85z"/>
<path d="M92.61,32.58c0.06-0.9,0.11-2.23,0.11-3.39V13.31h2.48v8.25h0.06c0.88-1.47,2.48-2.42,4.71-2.42c3.42,0,5.85,2.71,5.82,6.7
c0,4.7-3.11,7.03-6.19,7.03c-2,0-3.59-0.73-4.62-2.47h-0.09l-0.11,2.17H92.61z M95.2,27.32c0,0.3,0.06,0.6,0.11,0.87
c0.48,1.66,1.94,2.8,3.76,2.8c2.62,0,4.19-2.04,4.19-5.05c0-2.63-1.43-4.89-4.11-4.89c-1.71,0-3.31,1.11-3.82,2.93
c-0.06,0.27-0.14,0.6-0.14,0.98V27.32z"/>
<path d="M121.44,25.9c0,4.86-3.54,6.98-6.87,6.98c-3.74,0-6.62-2.61-6.62-6.76c0-4.4,3.02-6.98,6.84-6.98
C118.75,19.15,121.44,21.89,121.44,25.9z M110.48,26.04c0,2.88,1.74,5.05,4.19,5.05c2.4,0,4.19-2.14,4.19-5.1
c0-2.23-1.17-5.05-4.14-5.05S110.48,23.54,110.48,26.04z"/>
<path d="M136.15,29c0,1.36,0.03,2.55,0.11,3.58h-2.22l-0.14-2.14h-0.06c-0.66,1.06-2.11,2.44-4.56,2.44
c-2.17,0-4.76-1.14-4.76-5.75v-7.68h2.51v7.27c0,2.5,0.8,4.18,3.08,4.18c1.68,0,2.85-1.11,3.31-2.17c0.14-0.35,0.23-0.79,0.23-1.22
v-8.06h2.51V29z"/>
<path d="M143.33,15.67v3.77h3.59v1.82h-3.59v7.09c0,1.63,0.48,2.55,1.88,2.55c0.66,0,1.14-0.08,1.45-0.16l0.11,1.79
c-0.48,0.19-1.25,0.33-2.22,0.33c-1.17,0-2.11-0.35-2.71-1c-0.71-0.71-0.97-1.87-0.97-3.42v-7.17h-2.14v-1.82h2.14v-3.15
L143.33,15.67z"/>
<path d="M172.08,24.55c-0.14-2.55-0.31-5.62-0.29-7.9h-0.09c-0.66,2.14-1.45,4.42-2.42,6.95l-3.39,8.88h-1.88l-3.11-8.71
c-0.91-2.58-1.68-4.94-2.22-7.11h-0.06c-0.06,2.28-0.2,5.35-0.37,8.09l-0.51,7.84h-2.37l1.34-18.3h3.17l3.28,8.85
c0.8,2.25,1.46,4.26,1.94,6.16h0.09c0.48-1.85,1.17-3.86,2.02-6.16l3.42-8.85h3.17l1.2,18.3h-2.42L172.08,24.55z"/>
<path d="M188.76,24h-7.47v6.6h8.33v1.98H178.8v-18.3h10.38v1.98h-7.9v5.78h7.47V24z"/>
<rect x="54.72" y="8.99" class="st0" width="69.62" height="7.96"/>
</svg>
</section>

cannot change height of a svg group element with javascript

<svg>
<!--SOME SVG CODE HERE-->
<g id="bg"> <!--More svg code-->
</g>
</svg>
<!--Imports-->
<script src="script.js"></script>
<link rel="stylesheet" href="st.css">
</html>
CSS:
#bg{
height:100%;
}
When i use javascript to change the height:
document.getElementById("bg").style.height = "500px"
nothing happens, and, when i try to print the height in screen, it's returns nothing:
alert(document.getElementById("bg").style.height)
what can i do to change the height with javascript.

if you need to give a width and a height to an element inside an svg element you have to use a <symbol> with a viewBox instead of a group. Next you have to use the <symbol>and you can give a width and a height to the <use> element
svg{border:solid}
<svg viewBox="0 0 200 100" width="300">
<symbol id="c" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="5"/>
</symbol>
<use xlink:href="#c" x="10" y="10" width="40" height="40" />
</svg>

Vivus JS doesn't seem to animate certain <path> nodes

I'm playing with the Vivus JS library, which is very cool for animating paths like drawing a picture. Now, I have this SVG icon that should animate to a 100% line-width, but it doesn't seem to work. On other icons in my project it works well.
See this CodePen: http://codepen.io/anon/pen/yOqdbN summarized as follows
<svg xmlns="http://www.w3.org/2000/svg">
<path d="...">
<path d="...">
</svg>
Does anyone know why this is happening? Thank you very much for any help pointing me in the right direction.

Vivus works by animating the strokeDashOffset property of a path which requires that your path has a stroke defined, e.g.
<path d="..." stroke="black">
Note that from your nodes I see that you can achieve better results setting fill="transparent"
var els = document.querySelectorAll('path');
Array.prototype.slice.call(els).forEach(function(el) {
el.setAttribute('stroke', 'black')
el.setAttribute('fill', 'transparent')
})
var SVGcrown = new Vivus('SVGcrown', {
duration: 300,
animTimingFunction: Vivus.EASE_OUT
});
body {
background: #FFF;
}
#SVGcrown {
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.0/vivus.js"></script>
<svg id="SVGcrown" enable-background="new 0 0 48 48" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M41.93,38H6.07l-0.251-0.167C2.175,35.413,0,31.363,0,27c0-7.168,5.832-13,13-13c2.069,0,4.128,0.499,5.954,1.442 l-0.918,1.777C16.47,16.41,14.776,16,13,16C6.935,16,2,20.935,2,27c0,3.594,1.744,6.936,4.681,9h34.638 C44.256,33.936,46,30.594,46,27c0-6.065-4.935-11-11-11c-1.778,0-3.473,0.411-5.04,1.222l-0.919-1.775 C30.868,14.5,32.929,14,35,14c7.168,0,13,5.832,13,13c0,4.363-2.175,8.413-5.819,10.833L41.93,38z"
/>
<path d="M42,48H6c-2.611,0-3.978-2.013-3.978-4.001C2.022,42.012,3.389,40,6,40h36c2.611,0,3.978,2.013,3.978,4.001 C45.978,45.988,44.611,48,42,48z M6,42c-1.46,0-1.978,1.077-1.978,1.999C4.022,44.922,4.54,46,6,46h36 c1.46,0,1.978-1.077,1.978-1.999C43.978,43.078,43.46,42,42,42H6z"
/>
<path d="M12.695,32.032c-0.411,0-0.795-0.255-0.942-0.663C11.253,29.97,11,28.5,11,27c0-7.168,5.832-13,13-13s13,5.832,13,13 c0,1.49-0.251,2.952-0.746,4.346c-0.186,0.52-0.76,0.789-1.277,0.607c-0.521-0.185-0.792-0.757-0.608-1.277 C34.788,29.498,35,28.262,35,27c0-6.065-4.935-11-11-11s-11,4.935-11,11c0,1.27,0.214,2.513,0.637,3.695 c0.186,0.521-0.085,1.093-0.605,1.278C12.92,32.014,12.807,32.032,12.695,32.032z"
/>
<path d="M24,12c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S27.309,12,24,12z M24,2c-2.206,0-4,1.794-4,4s1.794,4,4,4 s4-1.794,4-4S26.206,2,24,2z" />
<path d="M29,7H19c-0.552,0-1-0.447-1-1s0.448-1,1-1h10c0.552,0,1,0.447,1,1S29.552,7,29,7z" />
<path d="M24,16c-0.552,0-1-0.447-1-1v-4c0-0.553,0.448-1,1-1s1,0.447,1,1v4C25,15.553,24.552,16,24,16z" />
</svg>

How to fill svg when scrolling

I have svg line:
<svg class="filling" width="500" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path data-over-line="" d="M90,5 L500,5" stroke="#e2e2e2" fill="transparent" stroke-width="4" style="stroke-dashoffset: 0px;"></path>
</svg>
I need when scroll the page it is gradually filled with a different color. How to do it?

I am not sure what shape you ultimately want for your scrollbar, but here is a simple solution. We draw a blue line on top of your grey line to indicate scroll progress. The length of the line is determined by calculating how far done the page we have scrolled.
If you ultimately want to have the scrollbar be a shape other than a line or a rectangle, you will need to take a different approach.
SVG (modified a little):
<svg class="filling" width="500" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="90" y1="5" x2="500" y2="5" stroke="#e2e2e2" fill="transparent" stroke-width="4" />
<line x1="90" y1="5" x2="90" y2="5" stroke="blue" fill="transparent" stroke-width="4" id="scrollprogress" />
</svg>
JS:
window.onscroll = function (event) {
var offset = window.pageYOffset;
var wheight = window.innerHeight;
var html = document.documentElement;
var docheight = Math.max(document.body.scrollHeight, document.body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
var progress = offset / (docheight - wheight);
// Give the line a CSS gradient based on scroll position
document.getElementById("scrollprogress").setAttribute("x2", 90 + progress * 410);
}
Demo fiddle

animate SVG drawing on path with preserveAspectRatio="none"

I have a SVG drawing (see code snippet 1) for which I want to preserve the aspect ratio, and I want to animate it along a SVG path (see code snippet 2) that I want to fit to my container div with preserveAspectRatio="none".
/* SVG drawing for which aspect ratio should be kept */
svg[id^="robot"]{
width: 90px;
position: absolute;
}
#robot1 [data-rotate]{
-webkit-animation: wheel linear infinite;
-webkit-animation-duration: 5s;
-webkit-transform-origin: 50% 50%;
}
#-webkit-keyframes wheel { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }
.st0{ fill-rule:evenodd;clip-rule:evenodd;fill:#3C5482; }
.st1{ fill-rule:evenodd;clip-rule:evenodd;fill:#A5DFE9; }
.st2{ fill-rule:evenodd;clip-rule:evenodd;fill:#7BC7D4; }
.st3{ fill-rule:evenodd;clip-rule:evenodd;fill:#80C1D3; }
.st4{ fill-rule:evenodd;clip-rule:evenodd;fill:#889BA9; }
.st5{ fill-rule:evenodd;clip-rule:evenodd;fill:#1E3869; }
.st6{ fill:none;stroke:#FEB556;stroke-width:4.479;stroke-miterlimit:10;stroke-dasharray:12.059,12.059; }
.st7{ fill-rule:evenodd;clip-rule:evenodd;fill:#F4918C; }
.st8{ fill-rule:evenodd;clip-rule:evenodd;fill:#F5716C; }
.st9{ fill-rule:evenodd;clip-rule:evenodd;fill:#5F7D95; }
.st10{ fill-rule:evenodd;clip-rule:evenodd;fill:#5F7F94; }
.st11{ fill-rule:evenodd;clip-rule:evenodd;fill:#FEB556; }
.st12{ fill-rule:evenodd;clip-rule:evenodd;fill:#FECC85; }
.st13{ fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF; }
<svg id="robot1" viewBox="0 0 291.996 384.643">
<polygon class="st5" points="145.998,306.264 145.998,208.082 170.532,208.082 170.532,216.893 174.655,216.893 174.655,223.615 170.532,223.615 170.532,226.877 174.655,226.877 174.655,233.615 170.532,233.615 170.532,236.877 174.655,236.877 174.655,243.614 170.532,243.614 170.532,246.877 174.655,246.877 174.655,253.599 170.532,253.599 170.532,256.86 174.655,256.86 174.655,263.598 170.532,263.598 170.532,266.859 174.655,266.859 174.655,273.598 170.532,273.598 170.532,306.264 "/>
<polygon class="st0" points="145.998,306.264 145.998,208.082 121.457,208.082 121.457,216.893 117.326,216.893 117.326,223.615 121.457,223.615 121.457,226.877 117.326,226.877 117.326,233.615 121.457,233.615 121.457,236.877 117.326,236.877 117.326,243.614 121.457,243.614 121.457,246.877 117.326,246.877 117.326,253.599 121.457,253.599 121.457,256.86 117.326,256.86 117.326,263.598 121.457,263.598 121.457,266.859 117.326,266.859 117.326,273.598 121.457,273.598 121.457,306.264 "/>
<rect x="145.998" y="133.193" class="st11" width="54.311" height="80.666"/>
<rect x="91.688" y="133.193" class="st12" width="54.311" height="80.666"/>
<rect x="17.309" y="88.12" class="st11" width="257.371" height="15.03"/>
<path class="st2" d="M145.998,191.254V0c52.802,0.015,95.619,42.818,95.619,95.635C241.617,148.437,198.8,191.254,145.998,191.254z"/>
<path class="st1" d="M145.998,191.254V0C93.181,0.015,50.371,42.818,50.371,95.635C50.371,148.437,93.181,191.254,145.998,191.254z"/>
<path class="st13" d="M145.998,45.852c27.498,0,49.784,22.285,49.784,49.783c0,27.483-22.286,49.769-49.784,49.769c-27.491,0-49.776-22.285-49.776-49.769C96.222,68.137,118.507,45.852,145.998,45.852z"/>
<path class="st11" d="M145.998,62.451c18.322,0,33.185,14.846,33.185,33.184c0,18.322-14.862,33.184-33.185,33.184c-18.33,0-33.184-14.861-33.184-33.184C112.814,77.297,127.668,62.451,145.998,62.451z"/>
<path class="st5" d="M145.998,72.131c12.979,0,23.505,10.518,23.505,23.504c0,12.973-10.525,23.505-23.505,23.505s-23.505-10.532-23.505-23.505C122.493,82.648,133.019,72.131,145.998,72.131z"/>
<path class="st10" data-rotate d="M203.43,326.652c0.059-1.068,0.095-2.143,0.095-3.226c0-1.088-0.037-2.166-0.096-3.239c2.181-1.688,3.379-4.494,2.871-7.399c-0.519-2.902-2.598-5.123-5.219-5.965c-0.628-2.085-1.368-4.12-2.218-6.098c1.458-2.332,1.621-5.372,0.151-7.922c-1.474-2.544-4.186-3.927-6.941-3.823c-1.293-1.727-2.69-3.367-4.165-4.937c0.585-2.695-0.3-5.618-2.552-7.52c-2.271-1.899-5.3-2.266-7.853-1.22c-1.794-1.178-3.659-2.254-5.585-3.229c-0.368-2.736-2.205-5.183-4.983-6.191c-2.771-1.009-5.745-0.314-7.787,1.543c-2.079-0.486-4.201-0.862-6.36-1.116c-1.282-2.442-3.837-4.117-6.79-4.117s-5.512,1.675-6.796,4.118c-2.158,0.254-4.278,0.629-6.356,1.116c-2.042-1.858-5.016-2.553-7.792-1.544c-2.771,1.008-4.603,3.455-4.972,6.19c-1.929,0.976-3.795,2.054-5.592,3.232c-2.553-1.049-5.587-0.685-7.85,1.217c-2.26,1.903-3.146,4.829-2.555,7.527c-1.472,1.566-2.867,3.206-4.158,4.93c-2.755-0.106-5.478,1.276-6.953,3.822c-1.474,2.555-1.311,5.602,0.158,7.935c-0.848,1.973-1.584,4.003-2.21,6.081c-2.623,0.841-4.705,3.063-5.219,5.969c-0.515,2.909,0.686,5.72,2.87,7.406c-0.06,1.07-0.096,2.147-0.096,3.232c0,1.081,0.036,2.153,0.095,3.22c-2.184,1.687-3.384,4.496-2.869,7.405c0.514,2.903,2.596,5.134,5.217,5.975c0.626,2.078,1.362,4.107,2.209,6.08c-1.466,2.332-1.627,5.377-0.155,7.93c1.474,2.556,4.194,3.934,6.948,3.825c1.292,1.726,2.688,3.365,4.162,4.933c-0.589,2.701,0.297,5.63,2.556,7.521c2.262,1.9,5.294,2.266,7.847,1.218c1.797,1.18,3.665,2.258,5.595,3.233c0.37,2.735,2.201,5.18,4.971,6.188c2.776,1.01,5.75,0.313,7.792-1.544c2.077,0.486,4.196,0.86,6.353,1.114c1.282,2.448,3.844,4.119,6.8,4.119c2.955,0,5.513-1.671,6.793-4.118c2.158-0.254,4.278-0.628,6.356-1.114c2.042,1.856,5.017,2.552,7.787,1.543c2.777-1.008,4.613-3.453,4.983-6.188c1.927-0.975,3.793-2.052,5.588-3.229c2.552,1.043,5.58,0.677,7.85-1.222c2.251-1.89,3.137-4.814,2.553-7.514c1.476-1.569,2.875-3.212,4.169-4.94c2.754,0.105,5.463-1.272,6.936-3.825c1.469-2.548,1.308-5.586-0.147-7.917c0.85-1.977,1.589-4.012,2.217-6.096c2.62-0.843,4.698-3.072,5.217-5.972C206.809,331.146,205.611,328.34,203.43,326.652z"/>
<path class="st2" d="M145.998,369.293v-91.748h0.297c25.197,0.152,45.585,20.639,45.585,45.881c0,25.229-20.388,45.715-45.585,45.867H145.998z"/>
<path class="st1" d="M145.998,369.293v-91.748h-0.297c-25.205,0.152-45.585,20.639-45.585,45.881c0,25.229,20.38,45.715,45.585,45.867H145.998z"/>
<path class="st11" d="M145.998,306.112c9.558,0,17.301,7.758,17.301,17.314c0,9.559-7.743,17.301-17.301,17.301s-17.309-7.742-17.309-17.301C128.689,313.87,136.44,306.112,145.998,306.112z"/>
<path class="st10" d="M96.214,95.643c0-27.498,22.285-49.783,49.776-49.783c27.498,0,49.784,22.285,49.784,49.783"/>
<circle class="st2" cx="17.305" cy="95.643" r="17.305"/>
<circle class="st2" cx="274.68" cy="95.635" r="17.305"/>
</svg>
#path {
height: 100%;
width: 100%;
}
<!-- SVG path along which to animate, this should be stretched to fit the container div -->
<svg id="path" viewBox="0 0 819.082 996.1" preserveAspectRatio="none">
<path id="thePath" d="M819.082,696.1c0,165.686-134.314,300-300,300H300c-165.686,0-300-134.314-300-300V300 C0,134.315,134.314,0,300,0h219.082c165.686,0,300,134.315,300,300V696.1z" />
</svg>
In a standard situation, I'd use the svg tag animateMotion to accomplish this:
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#thePath"/>
</animateMotion>
But here the path I want to follow has to be contained in a separate <svg></svg> because I want it to be stretched to the parent div and not the drawing.
How can I accomplish this?
It'd be ideal if the solution was pure SVG/CSS but if it requires some javascript it's okay too. Please no jQuery.

Categories

Resources