Develop Reference

Dashed path using SVG

I followed this and made my own svg path scroll. I achieved the animation but I can seem to find that why the dashes are not appearing on the line. I tried different things but still could not find any solution. Please can some one help.
// Get the id of the <path> element and the length of <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();
circle = document.getElementById("circle");
// The start position of the drawing
myline.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
myline.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
// What % down is it?
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop * 4) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Length to offset the dashes
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
myline.style.strokeDashoffset = length - draw;
//get point at length
endPoint = myline.getPointAtLength(draw);
circle.setAttribute("cx", endPoint.x);
circle.setAttribute("cy", endPoint.y);
}
body {
height: 2000px;
background: #f1f1f1;
}
#circle {
fill: #000;
}
#myLine {
stroke-dasharray: 8;
}
#mySVG {
position: relative;
top: 10%;
width: 90vw;
height: 90vh;
margin-left: -50px;
}
.st0 {
fill: none;
stroke-dashoffset: 3px;
stroke: green;
stroke-width: 5;
stroke-miterlimit: 10;
stroke-dasharray: 20;
}
.mask-style {
stroke: white;
stroke-width: 7;
}
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.099 699.491" style="padding-bottom: 0%; overflow: visible;">
<defs>
<mask id="dash-mask">
<path class="st0 mask-style" stroke-dasharray="10,9" d="M5381.266 335.957s-105.8-62.765-170.449 28.765-63.274 160.934 0 354.388 31.274 395.636-229.089 232.727" transform="translate(-4980.932 -313.455)"/>
</mask>
</defs>
<circle id="circle" cx="404" cy="20" r="8"/>
<path id="myline" class="st0" stroke-dasharray="10,9" d="M5381.266 335.957s-105.8-62.765-170.449 28.765-63.274 160.934 0 354.388 31.274 395.636-229.089 232.727" transform="translate(-4980.932 -313.455)" />
</svg>
So what i am trying is to just make the path dashed.

You need to construct the correct stroke-dash-array - right now the CSS specified stroke dasharray (10,9) is being over-written by myline.style.strokeDasharray = length. That needs to be something like "10, 9, 10, 9, 10, 9, 10,9, 10,9" + length - so the part of the line that is being hidden by the offset has an appropriate dash.
The following tweak is not completely correct - you need to write some code to construct the correct dash-array - but it should give you the idea.
// Get the id of the <path> element and the length of <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();
circle = document.getElementById("circle");
// The start position of the drawing
myline.style.strokeDasharray = "0, " + length + " ,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9,10,9 " + length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
myline.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
// What % down is it?
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop * 4) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Length to offset the dashes
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
myline.style.strokeDashoffset = length - draw;
//get point at length
endPoint = myline.getPointAtLength(draw);
circle.setAttribute("cx", endPoint.x);
circle.setAttribute("cy", endPoint.y);
}
body {
height: 2000px;
background: #f1f1f1;
}
#circle {
fill: #000;
}
#myLine {
stroke-dasharray: 8;
}
#mySVG {
position: relative;
top: 10%;
width: 90vw;
height: 90vh;
margin-left: -50px;
}
.st0 {
fill: none;
stroke-dashoffset: 3px;
stroke: green;
stroke-width: 5;
stroke-miterlimit: 10;
stroke-dasharray: 20;
}
.mask-style {
stroke: white;
stroke-width: 7;
}
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.099 699.491" style="padding-bottom: 0%; overflow: visible;">
<defs>
<mask id="dash-mask">
<path class="st0 mask-style" stroke-dasharray="10,9" d="M5381.266 335.957s-105.8-62.765-170.449 28.765-63.274 160.934 0 354.388 31.274 395.636-229.089 232.727" transform="translate(-4980.932 -313.455)"/>
</mask>
</defs>
<circle id="circle" cx="404" cy="20" r="8"/>
<path id="myline" class="st0" stroke-dasharray="10,9" d="M5381.266 335.957s-105.8-62.765-170.449 28.765-63.274 160.934 0 354.388 31.274 395.636-229.089 232.727" transform="translate(-4980.932 -313.455)" />
</svg>

Need to increase height and width of circle

I need to increase circle height and width to double. But it's not working. Please suggest me where I put the error in the code. I have no idea about the value of r. Please help me to update the value of r.
Here is my sample code.
var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
$('.circle_animation').css(
'stroke-dashoffset',
initialOffset - (i * (initialOffset / time) * (r / 69.85699))
);
$('h2').text(i);
if (i == time) {
clearInterval(interval);
}
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align: center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440;
/* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>

As you guessed, you have to change the value of r to change the radius.
If we look at the javascript code:
var r = $(".circle_animation").attr("r");
It means that r is the value of the html attribute r of the element with class name circle_animation.
If we then look at the html markup:
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
we see that r is set to 69.85699 on the circle with class name circle_animation
After that you have to remember that since your drawing a larger circle, you will also have to double both the size of the svg and the stroke-dasharray and stroke-dashoffset (these values are supposed to be 2*2*PI*r for this animation).
Here is your example with doubled radius as you requested:
var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
$('.circle_animation').css(
'stroke-dashoffset',
initialOffset-(i*(initialOffset/time)*(r/139.71398))
);
$('h2').text(i);
if (i == time) {
clearInterval(interval);
}
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
margin-top: 60px;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 878; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 878;
transition: all 1s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="139.71398" cy="162" cx="162" stroke-width="8" stroke="#6fdb6f" fill="none"/>

your radius is 69.85699 on the circle. lets consider 70 for simplicity.
double will be 140, circumference of this circle would be 880
now your cx and cy should also consider the offset/width of the stroke.
so, 140 + (8/2)
most other calculations are simple as you have already done them.
var time = 10;
var initialOffset = '880';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
$('.circle_animation').css(
'stroke-dashoffset',
initialOffset-(i*(initialOffset/time)*(r/140))
);
$('h2').text(i);
if (i == time) {
clearInterval(interval);
}
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align: center;
position: absolute;
line-height: 265px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 880; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 880;
transition: all 1s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="140" cy="144" cx="144" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>

You need this, Check this fiddle and code https://jsfiddle.net/rmcej7vk/
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="139.7139" cy="162" cx="162" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
JS
var time = 10;
var initialOffset = '880';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
$('.circle_animation').css(
'stroke-dashoffset',
initialOffset - (i * (initialOffset / time) * (r / 139.7139))
);
$('h2').text(i);
if (i == time) {
clearInterval(interval);
}
i++;
}, 1000);
CSS
.item {
position: relative;
float: left;
}
.item h2 {
text-align: center;
position: absolute;
line-height: 250px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 880;
/* this value is the pixel circumference of the circle */
stroke-dashoffset: 880;
transition: all 1s linear;
}

countdown timer loader animation

Circle outline completes before timer finish. Although it is working fine when with the larger circle. fiddle
var time = 10;
var initialOffset = '440';
var i = 1
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
$('h2').text(i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440;
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="70" height="70" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="25" cy="35" cx="35" stroke-width="4" stroke="#6fdb6f" fill="#ccc"/>
</g>
</svg>
</div>

You have to reduce the offset, both in css and javascript, i updated your code there :
http://jsfiddle.net/3recj0s9/
CSS :
.circle_animation {
stroke-dasharray: 155;
stroke-dashoffset: 155;
transition: all 1s linear;
}
JS
var initialOffset = '155';

how to animate google maps api circle?

I have build a pulse animation in CSS3I would like to implement in to marker in google maps api unfortunately it is not possible direct insert in to the map. Is there any option to the CSS3 animation or
Is it possible to make google map circle increase and decrease as an animation.
var myCity = new google.maps.Circle({
center: bigOne,
radius: 150,
strokeColor: "#E16D65",
strokeWeight: 2,
fillColor: "#E16D65",
fillOpacity: 0
});
var smallcircle = new google.maps.Circle({
center: smallOne,
radius: 300,
strokeColor: "#E16D65",
strokeOpacity: 1,
strokeWeight: 2,
fillColor: "#E16D65",
fillOpacity: 0
});
DEMO http://jsfiddle.net/gbqzQ/4/

You can change circle radius using setRadius() method and make animation using setInterval():
var direction = 1;
var rMin = 150, rMax = 300;
setInterval(function() {
var radius = circle.getRadius();
if ((radius > rMax) || (radius < rMin)) {
direction *= -1;
}
circle.setRadius(radius + direction * 10);
}, 50);
See example at jsbin.
Update: Radius on zoom: you have to change it with factor 2. See updated example at jsbin.

-- 2021 solution: --
This may be an old question and answer but is still relevant for the Google Maps API nowadays as of now (2021). Also using svg wasn't as popular back then. Therefore I used the inline style tag to create an animated svg icon that imitates a circle. You can set width and height to your desired requirements and add this as a marker with:
const marker = new google.maps.Marker({
map: map,
icon: "/img/marker.svg"
});
SVG:
<svg width="40px" height="40px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
circle {
fill: #d2546b;
stroke: #d2546b;
stroke-width: 1px;
stroke-opacity: 1;
}
.pulse {
fill: #7F40E2;
fill-opacity: 0;
transform-origin: 50% 50%;
animation-duration: 2s;
animation-name: pulse;
animation-iteration-count: infinite;
}
#keyframes pulse {
from {
stroke-width: 5px;
stroke-opacity: 1;
transform: scale(0.3);
}
to {
stroke-width: 0;
stroke-opacity: 0;
transform: scale(2);
}
}
</style>
</defs>
<circle cx="50%" cy="50%" r="5px"></circle>
<circle class="pulse" cx="50%" cy="50%" r="8px"></circle>
</svg>

Can an SVG background be interactive?

I have an SVG image that I created. It is a rectangle with a circle inside it. The circle follows the users mouse using JavaScript. The image is represented by the following code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlspace="preserve" preserveAspectRatio="xMidYMin slic">
<style>
* { vector-effect:non-scaling-stroke }
rect { fill: blue; }
circle { fill:orange; opacity:0.75; }
</style>
<rect cx="50%" cy="0" width="720" height="1278" id="origin" />
<circle cx="50%" cy="116" r="72" id="dot" />
<script>
var svg = document.documentElement,
pt = svg.createSVGPoint(),
dot = document.querySelector('#dot');
svg.addEventListener('mousemove',function(evt){
var loc = cursorPoint(evt);
dot.setAttribute('cx',loc.x);
dot.setAttribute('cy',loc.y);
},false);
function rotateElement(el,originX,originY,towardsX,towardsY){
var degrees = Math.atan2(towardsY-originY,towardsX-originX)*180/Math.PI + 90;
el.setAttribute(
'transform',
'translate('+originX+','+originY+') translate('+(-originX)+','+(-originY)+')'
);
}
// Get point in global SVG space
function cursorPoint(evt){
pt.x = evt.clientX; pt.y = evt.clientY;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
</script>
</svg>
What I would like to do with this image is use it as a CSS background. If I use CSS to set the image as a background {background: url("image.svg");} then the JavaScript no longer works, i.e. the circle no longer follows the cursor. I believe this is due to the fact that when the image is a background, it has other elements stacked on top of it.
So how can I have the image be a background and also remain interactive? Any suggestions would be greatly appreciated.

One of the way to get a scripted background SVG working, is to use CSS4 element(). It's currently only implemented in Firefox 4+ via -moz-element().
An example:
<div id="bg" style="width: 400px; height: 400px;">
<svg width="400" height="400" viewPort="0 0 400 400">
<!-- force correct 0,0 coordinates -->
<rect x="0" y="0" width="1" height="1" fill="transparent" />
<rect x="0" y="0" id="animable1" width="120" height="120" fill="blue" />
<rect x="0" y="0" id="animable2" width="60" height="60" fill="red" />
</svg>
</div>
<div id="target" style="border: 4px dashed black; height: 400px; width: 400px; background: gray -moz-element(#bg); background-size: 20%;"></div>
<script type="text/javascript">
var divTarget = document.getElementById("target");
var animable1 = document.getElementById("animable1");
var animable2 = document.getElementById("animable2");
document.addEventListener("mousemove", function(event){
var rotation = Math.atan2(event.clientY, event.clientX);
animable1.setAttribute("transform", "translate(140 140) rotate(" + (rotation / Math.PI * 360) + " 60 60)");
animable2.setAttribute("transform", "translate(170 170) rotate(" + (360 - rotation / Math.PI * 360) + " 30 30)");
}, false);
animable1.setAttribute("transform", "translate(140 140) rotate(0 60 60)");
animable2.setAttribute("transform", "translate(170 170) rotate(0 30 30)");
</script>

You should create two files one of the .css file and the other one is Of course, better to have separate files, because it is actually a part of the container is html. SVG within this container,'s JavaScripts. This divide-and-conquer simplification or incident. For this reason, the external file is actually being held as JavaScripts. This is a great way to will not loose in the code.
SVG defining:
<div><object id="circle-svg" width="400" height="300" type="image/svg+xml" data="moving_circle.svg"></object></div>
Here, the part of the data you describe your own SVG
for example, canvas:
canvas = d3.select("#circle-svg")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
Part1:
Take a look at this code (html based)
<head>
<title>Controlling an SVG with Javascript</title>
<script type='text/javascript' src='svg-interaction.js'></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
div.tooltip {
position: absolute;
text-align: center;
z-index: 10;
width: 140px;
height: auto;
padding: 8px;
font: 24px sans-serif;
background: red;
color: white;
border: solid 1px #aaa;
border-radius: 8px;
opacity: 0;
}
</style>
<head>
<body>
<h2>Controlling SVG with Javascript</h2>
<div class="page-content">
<div><object id="circle-svg" width="400" height="300" type="image/svg+xml" data="moving_circle.svg"></object></div>
You can define your scripts over there
Then you continue to the second phase (Your SVG study)
<svg viewBox="0 0 400 400" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
a3:scriptImplementation="Adobe"
onload="init(evt)"
onzoom="updateTracker(evt)"
onscroll="updateTracker(evt)"
onresize="updateTracker(evt)">
<script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
/*****
*
* Globals
*
*****/
var elems = {
tracker: false,
cursor: false,
trans: true,
scale: true,
mx: true,
my: true,
ux: true,
uy: true
};
var frame = {
x_trans: 0,
y_trans: 0,
zoom : 1,
x_scale: 1,
y_scale: 1
};