I've two svg elements on which I've applied a mouseover/mouseout event. The goal is to increase the radius of the mask on mouseover to a size specified by a variable (maxMaskRadius) and decrease it on mouseout back to the initial state (initialMaskRadius).
I works perfectly with just one element. But when I've two elements and hover from one element to another, the animation from the previous elements aborts immediately. But I'd like to have it animate back to its initial state. With my current code that's unfortunately not possible.
Any suggestions on how to do that proper?
DEMO
CSS:
.dday.highlight .overlay {
fill: rgba(247,99,62,0.8);
}
.dday.normal {
width: 288px;
height: 288px;
}
HTML:
<svg class="dday highlight normal" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-image="car.jpg">
<image height="196" width="250" />
<a class="overlay" xlink:href="/svg/index.html" target="_top">
<rect x="0" y="0" width="288" height="288" style="mask: url(#mask1)" onmouseover="initAnimation(evt)" onmouseout="initAnimation(evt)" />
</a>
<mask id="mask1">
<rect x="0" y="0" width="288" height="288" fill="#fff" />
<circle cx="125" cy="125" r="25" />
</mask>
</svg>
<svg class="dday highlight normal" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-image="nokia.jpg">
<image height="196" width="250" />
<a class="overlay" xlink:href="/svg/index.html" target="_top">
<rect x="0" y="0" width="288" height="288" style="mask: url(#mask2)" onmouseover="initAnimation(evt)" onmouseout="initAnimation(evt)" />
</a>
<mask id="mask2">
<rect x="0" y="0" width="288" height="288" fill="#fff" />
<circle cx="125" cy="125" r="25" />
</mask>
</svg>
JS:
var maxImageWidth = 250,
maxImageHeight = 196,
ease = 50,
speed = 12,
maxMaskRadius = 100,
svg = null,
svgWidth = null,
svgHeight = null,
mask = null,
maskRadius = null,
initialMaskRadius = null,
imageObj = [],
imageSrcs = [],
imageWidth = null,
imageHeight = null,
mouseEvent = null;
init();
function init(el, index) {
$('.dday').each(function(index){
defineCurrentElement(this, index);
positionMask();
});
}
function defineCurrentElement(el, index) {
// Redefine the current Element
svg = $(el).closest('.dday'),
svgWidth = svg.width(),
svgHeight = svg.height(),
mask = svg.find('circle')[0];
// On page load there is a index provided to load the images for each element
if(typeof index !== 'undefined'){
loadImage(index);
}
}
function loadImage(index) {
// Load images and scale them to fit the predefined area
imageSrcs[index] = svg.data('image');
imageObj[index] = new Image(),
imageObj[index].image = $('image')[index];
imageObj[index].onload = function(){
scale_width = maxImageWidth / this.width;
scale_height = maxImageHeight / this.height;
scale = Math.min(scale_width, scale_height);
imageWidth = this.width * scale;
imageHeight = this.height * scale;
var xCoordinate = (svgWidth - imageWidth) / 2,
yCoordinate = (svgHeight - imageHeight) / 2;
this.image.setAttributeNS('http://www.w3.org/1999/xlink','href', imageSrcs[index]);
this.image.setAttributeNS(null,'width', imageWidth);
this.image.setAttributeNS(null,'height', imageHeight);
this.image.setAttributeNS(null,'x', xCoordinate);
this.image.setAttributeNS(null,'y', yCoordinate);
};
imageObj[index].src = imageSrcs[index];
}
function initAnimation(ev) {
// Triggered on mouseover/-out
// Change current element and init animation
defineCurrentElement(ev.target);
mouseEvent = ev.type;
requestAnimationFrame(animate);
}
function animate() {
if(mouseEvent == 'mouseover') {
// Increase mask radius on mouseover and repeat until target state is reached
maskRadius += Math.round(Math.max(((maxMaskRadius-maskRadius)/ease) * speed, 0.5));
if(maskRadius >= maxMaskRadius) {
// Target radius has been reached
maskRadius = maxMaskRadius;
} else {
// Target radius hasn't been reached yet -> repeat animation
mask.setAttributeNS(null,'r', maskRadius);
requestAnimationFrame(animate);
}
} else {
// Decrease mask radius on mouseover and repeat until initial state is reached
maskRadius -= Math.max(((maskRadius-initialMaskRadius)/ease) * speed, 0.5);
if(maskRadius <= initialMaskRadius) {
// Target radius has been reached
maskRadius = initialMaskRadius;
} else {
// Target radius hasn't been reached yet -> repeat animation
mask.setAttributeNS(null,'r', maskRadius);
requestAnimationFrame(animate);
}
}
}
function positionMask() {
// Center mask inside element
maskRadius = initialMaskRadius = parseInt(mask.getAttributeNS(null, 'r'), 10);
var maskWidth = maskRadius * 2,
xCoordinate = (svgWidth - maskWidth) / 2 + maskRadius,
yCoordinate = (svgHeight - maskWidth) / 2 + maskRadius;
mask.setAttributeNS(null,'cx', xCoordinate);
mask.setAttributeNS(null,'cy', yCoordinate);
}
Okke, I fixed all your code, and that was not an easy task to work with your code. Please declare all variables which you use, and not use in function global variables as your own private variables, because you can re-write existing global variable.
Now about fixed code:
CSS: no changes.
HTML: removed inline handlers (onmouseover and onmouseout)
Javascript:
When document is ready each svg element with class dday is initializing: downloading image for that svg if variable index exists (loading logic didn't changed almost), then centering mask, declaring function for animation, then adding handler for rect element in a element in initializing svg element.
All settings has been exported to variable settings
All private variables for svg is stored in {svgElement}.svgData object.
Demo: jsFiddle
P.S. By the way, this code is also not good enougt, need more time for clean code, but this code works.
HTML:
<svg class="dday sector-sports normal" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-image="http://img1.wikia.nocookie.net/__cb20130511205806/epicrapbattlesofhistory/images/9/94/Vaderrotj.jpg">
<image height="196" width="250" />
<a class="overlay" xlink:href="/svg/index.html" target="_top">
<rect x="0" y="0" width="288" height="288" style="mask: url(#mask1)" />
</a>
<mask id="mask1">
<rect x="0" y="0" width="288" height="288" fill="#fff" />
<circle cx="125" cy="125" r="25" />
</mask>
</svg>
<svg class="dday sector-sports normal" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-image="http://static.comicvine.com/uploads/original/11111/111116692/3213841-7948839370-yoda..jpg">
<image height="196" width="250" />
<a class="overlay" xlink:href="/svg/index.html" target="_top">
<rect x="0" y="0" width="288" height="288" style="mask: url(#mask2)" />
</a>
<mask id="mask2">
<rect x="0" y="0" width="288" height="288" fill="#fff" />
<circle cx="125" cy="125" r="25" />
</mask>
</svg>
Javascript: (used jQuery 1.11 library)
$(document).ready(function () {
var settings = {
imageWidthMax: 250,
imageHeightMax: 196,
ease: 50,
speed: 12,
maskRadiusMax: 100
};
var maskElements = [];
$('svg.dday').each(function (index) {
if (maskElements.indexOf(this) < 0) {
maskElements.push(this);
var sd = {};
this.svgData = sd;
sd.svg = $(this);
sd.svgWidth = sd.svg.width();
sd.svgHeight = sd.svg.height();
sd.mask = sd.svg.find('circle')[0];
// On page load there is a index provided to load the images for each element
if (typeof index !== 'undefined') {
var img = new Image();
img.image = $('image')[index];
img.onload = function () {
var m_scale_width = settings.imageWidthMax / this.width;
var m_scale_height = settings.imageHeightMax / this.height;
var m_scale = Math.min(m_scale_width, m_scale_height);
sd.imgWidth = this.width * m_scale;
sd.imgHeight = this.height * m_scale;
var m_x = (sd.svgWidth - sd.imgWidth) / 2;
var m_y = (sd.svgHeight - sd.imgHeight) / 2;
this.image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', sd.svg.data('image'));
this.image.setAttributeNS(null, 'width', sd.imgWidth);
this.image.setAttributeNS(null, 'height', sd.imgHeight);
this.image.setAttributeNS(null, 'x', m_x);
this.image.setAttributeNS(null, 'y', m_y);
};
img.src = sd.svg.data('image');
}
//Center mask inside element
sd.maskRadiusInit = parseInt(sd.mask.getAttributeNS(null, 'r'), 10);
sd.maskRadius = sd.maskRadiusInit;
sd.maskWidth = sd.maskRadius * 2;
sd.maskX = (sd.svgWidth - sd.maskWidth) / 2 + sd.maskRadius;
sd.maskY = (sd.svgHeight - sd.maskWidth) / 2 + sd.maskRadius;
sd.mask.setAttributeNS(null, 'cx', sd.maskX);
sd.mask.setAttributeNS(null, 'cy', sd.maskY);
var animate = function () {
var m_addToRadius = Math.round(Math.max(((settings.maskRadiusMax - sd.maskRadius) / settings.ease) * settings.speed, 0.5));
if (sd.eventType === 'mouseover') {
sd.maskRadius += m_addToRadius;
if (sd.maskRadius > settings.maskRadiusMax) {
sd.maskRadius = settings.maskRadiusMax;
sd.mask.setAttributeNS(null, 'r', sd.maskRadius);
} else {
sd.mask.setAttributeNS(null, 'r', sd.maskRadius);
requestAnimationFrame(animate);
}
} else {
sd.maskRadius -= Math.round(Math.max(m_addToRadius, 0.5));
if (sd.maskRadius <= sd.maskRadiusInit) {
sd.maskRadius = sd.maskRadiusInit;
sd.mask.setAttributeNS(null, 'r', sd.maskRadius);
} else {
sd.mask.setAttributeNS(null, 'r', sd.maskRadius);
requestAnimationFrame(animate);
}
}
};
$('a>rect', this).on('mouseover mouseleave', function (evt) {
sd.eventType = evt.type;
requestAnimationFrame(animate);
});
}
});
});
Demo: jsFiddle
Below is an example of a Javascript animate object, AnimateJS It works cross-browser.
The example shows a quadratic hover effect for either an svg element or elements contained ing a <g>. Give it a try with your app.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example: Hover Over Element - Quadratic</title>
<script type="text/javascript" src="../bowser.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Example: Hover Over Element - Quadratic</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
When the cursor moves over the element its size is increased. This works on both transfomed and non-transformed elements, contained in a <g>, or as individual elements. Uses <b>getBBox</b> to determine scale reference point.
The previous hover size increase is reduced to its original size.
</div>
<table><tr>
<td>
<table>
<tr><td colspan=2><b>Animation Settings:</b></td></tr>
<tr><td>1. Smoothness</td><td>100 frames per second</td></tr>
<tr><td>2. Duration</td><td>200 - runtime in ms</td></tr>
<tr><td>3. Range</td><td> increase scale .5</td></tr>
<tr><td>4. Output Equation</td><td><span style=color:blue>function</span> quad(p){return Math.pow(p, 2)}</td></tr>
<tr><td>6. Application Output </td><td>element transform</td></tr>
</table><br />
<i>There are 2 hover functions: <b>hoverOverG(evt)</b> for <g> elements,<br />and <b>hoverOverE(evt)</b> for individual elements.</i>
</td>
<td>
<div id="svgDiv" style='background-color:lightgreen;'>
<svg version="1.1" id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" overflow="hidden" >
<g id="CircleStar1" onmouseover="hoverOverG(evt)" transform="translate(100 100)" ><polygon fill="crimson" stroke="none" points="15,-1.37091e-006 14.2658,-4.63527 12.1353,-8.81679 8.81679,-12.1353 4.63524,-14.2659 -1.37091e-006,-15 -4.63527,-14.2659 -8.81679,-12.1353 -12.1353,-8.81679 -14.2659,-4.63527 -15,-1.37091e-006 -14.2659,4.63524 -12.1353,8.81679 -8.81679,12.1353 -4.63527,14.2658 -1.37091e-006,15 4.63524,14.2658 8.81679,12.1353 12.1353,8.81679 14.2658,4.63524" /><polygon fill="dodgerblue" stroke="none" points="6.2319,3.59799 14.392,-1.37091e-006 6.2319,-3.59799 7.19598,-12.4638 -1.37091e-006,-7.19598 -7.19598,-12.4638 -6.2319,-3.59799 -14.392,-1.37091e-006 -6.2319,3.59799 -7.19598,12.4638 -1.37091e-006,7.19598 7.19598,12.4638" /></g>
<g id="CircleStar2" onmouseover="hoverOverG(evt)" transform="translate(200 200)" ><polygon fill="crimson" stroke="none" points="15,-1.37091e-006 14.2658,-4.63527 12.1353,-8.81679 8.81679,-12.1353 4.63524,-14.2659 -1.37091e-006,-15 -4.63527,-14.2659 -8.81679,-12.1353 -12.1353,-8.81679 -14.2659,-4.63527 -15,-1.37091e-006 -14.2659,4.63524 -12.1353,8.81679 -8.81679,12.1353 -4.63527,14.2658 -1.37091e-006,15 4.63524,14.2658 8.81679,12.1353 12.1353,8.81679 14.2658,4.63524" /><polygon fill="dodgerblue" stroke="none" points="6.2319,3.59799 14.392,-1.37091e-006 6.2319,-3.59799 7.19598,-12.4638 -1.37091e-006,-7.19598 -7.19598,-12.4638 -6.2319,-3.59799 -14.392,-1.37091e-006 -6.2319,3.59799 -7.19598,12.4638 -1.37091e-006,7.19598 7.19598,12.4638" /></g>
<g id="CircleStar3" onmouseover="hoverOverG(evt)" transform="translate(300 300)" ><polygon fill="crimson" stroke="none" points="15,-1.37091e-006 14.2658,-4.63527 12.1353,-8.81679 8.81679,-12.1353 4.63524,-14.2659 -1.37091e-006,-15 -4.63527,-14.2659 -8.81679,-12.1353 -12.1353,-8.81679 -14.2659,-4.63527 -15,-1.37091e-006 -14.2659,4.63524 -12.1353,8.81679 -8.81679,12.1353 -4.63527,14.2658 -1.37091e-006,15 4.63524,14.2658 8.81679,12.1353 12.1353,8.81679 14.2658,4.63524" /><polygon fill="dodgerblue" stroke="none" points="6.2319,3.59799 14.392,-1.37091e-006 6.2319,-3.59799 7.19598,-12.4638 -1.37091e-006,-7.19598 -7.19598,-12.4638 -6.2319,-3.59799 -14.392,-1.37091e-006 -6.2319,3.59799 -7.19598,12.4638 -1.37091e-006,7.19598 7.19598,12.4638" /></g>
<g id=rectEllipse transform="translate(330 20)scale(.5)" onmouseover="hoverOverG(evt)">
<rect x=50 y=200 width=60 height=50 fill=orange />
<ellipse cx=80 cy=227 rx=25 ry=15 fill=blue />
</g>
<g id=rectEllipseTransform transform="translate(130 120)scale(.5)" onmouseover="hoverOverG(evt)">
<rect x=50 y=200 width=60 height=50 fill=orange />
<ellipse cx=80 cy=227 rx=25 ry=15 fill=blue />
</g>
<g id=hoverElements >
<circle onmouseover="hoverOverE(evt)" cx=250 cy=150 r=10 fill=blue />
<circle onmouseover="hoverOverE(evt)" cx=150 cy=150 r=10 fill=blue />
<circle onmouseover="hoverOverE(evt)" cx=350 cy=350 r=10 fill=blue />
<circle transform="translate(110 40)" onmouseover="hoverOverE(evt)" cx=150 cy=150 r=10 fill=maroon />
<circle transform="translate(220 80)" onmouseover="hoverOverE(evt)" cx=150 cy=150 r=10 fill=maroon />
<circle transform="translate(220 80)" onmouseover="hoverOverE(evt)" cx=-10 cy=-10 r=10 fill=red />
<circle transform="translate(80 320)scale(.8)" onmouseover="hoverOverE(evt)" cx=-10 cy=-10 r=10 fill=red />
</g>
</svg>
</div>
</td>
</tr> </table>
<br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<div id='browserDiv' style='padding:5px;position:absolute;top:5px;left:5px;background-color:gainsboro;'>OK in:IE11/CH32/FF23<br /></div>
<script id=myScript>
/*---generalized animate core function
Allows progress/output to follow a specific/customized equation(delta)
Inspired by: Ilya Kantor - http://javascript.info/tutorial/animation
*/
var AnimateJS=function(options){
this.options=options
var start = new Date
var iT = setInterval(
function(){
var timePassed = new Date - start
var progress = timePassed / options.duration
if (progress > 1) progress = 1
this.progress=progress
var delta = options.delta(progress)
options.output(delta)
if (progress == 1)clearInterval(iT);
},options.delay)
}
/*
provide options:
1) range(end value)
2) frames per second(delay = 1000/frames per second)
3) duration in ms
4) delta: equation(linear,etc.)
5) output: This application's output function
*/
var HoverSizeIncrease=.5 //---the element's size increased by 50%--
var FinishedOver=true
var StartTrans=null
var PrevTarget=null
//--onmouseover g symbol---
function hoverOverG(evt)
{
if(FinishedOver==true && (evt.target.parentNode!=PrevTarget)) //--allows initial run---
{
if(PrevTarget)
extractHover(PrevTarget)
var target=evt.target.parentNode
PrevTarget=target
FinishedOver=false
var scaleBegin=1
var range=HoverSizeIncrease //---scale increase
var FPS=100 //---frames per second---
var duration=200 //---ms,.2 seconds---
//---quadratic formula in nth degree---
var delta=function quad(p){return Math.pow(p,2)}
if(target.getAttribute("transform"))
{
StartTrans=target.getAttribute("transform")
var myTrans=StartTrans
}
else
{
StartTrans=null
var myTrans=""
}
var bb=target.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
var cx=bbx+.5*bbw
var cy=bby+.5*bbh
//----core animation function---
new AnimateJS(
{
delay: 1000/FPS,
duration: duration,
delta: delta, //---quadratic---
output: function(delta)
{
var scale=scaleBegin+delta*range
target.setAttribute("transform",myTrans+"translate("+(cx)+" "+(cy)+")scale("+scale+")translate("+(-cx)+" "+(-cy)+")")
//---finished---
if(progress==1)
onFinish()
}
})
}
}
//--onmouseover element---
function hoverOverE(evt)
{
if(FinishedOver==true && (evt.target!=PrevTarget)) //--allows initial run---
{
if(PrevTarget)
extractHover(PrevTarget)
var target=evt.target
PrevTarget=target
FinishedOver=false
var scaleBegin=1
var range=HoverSizeIncrease //---scale increase
var FPS=100 //---frames per second---
var duration=200 //---ms,.2 seconds---
//---quadratic formula in nth degree---
var delta=function quad(p){return Math.pow(p,2)}
if(target.getAttribute("transform"))
{
StartTrans=target.getAttribute("transform")
var myTrans=StartTrans
}
else
{
StartTrans=null
var myTrans=""
}
var bb=target.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
var cx=bbx+.5*bbw
var cy=bby+.5*bbh
//----core animation function---
new AnimateJS(
{
delay: 1000/FPS,
duration: duration,
delta: delta, //---quadratic---
output: function(delta)
{
var scale=scaleBegin+delta*range
target.setAttribute("transform",myTrans+"translate("+(cx)+" "+(cy)+")scale("+scale+")translate("+(-cx)+" "+(-cy)+")")
//---finished---
if(progress==1)
onFinish()
}
})
}
}
var FinishedExtract=true
var ExtractTarget
var ExtractTrans
function extractHover(PrevTarget)
{
if(FinishedExtract==true) //--allows initial run---
{
ExtractTarget=PrevTarget
if(StartTrans)
ExtractTrans=StartTrans
else
ExtractTrans=""
FinishedExtract=false
var scaleBegin=1+HoverSizeIncrease
var range=HoverSizeIncrease //---scale decrease
var FPS=100 //---frames per second---
var duration=200 //---ms,.2 seconds---
//---quadratic formula in nth degree---
var delta=function quad(p){return Math.pow(p,2)}
var bb=ExtractTarget.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
var cx=bbx+.5*bbw
var cy=bby+.5*bbh
//----core animation function---
new AnimateJS(
{
delay: 1000/FPS,
duration: duration,
delta: delta, //---quadratic---
output: function(delta)
{
var scale=scaleBegin-delta*range
ExtractTarget.setAttribute("transform",ExtractTrans+"translate("+(cx)+" "+(cy)+")scale("+scale+")translate("+(-cx)+" "+(-cy)+")")
if (progress == 1) // --- finished---
extractFinish();
}
})
}
}
//---this example animation: loop finished---
function onFinish()
{
FinishedOver=true
}
//---this example animation: loop finished---
function extractFinish()
{
FinishedExtract=true
if(ExtractTrans!="")
ExtractTarget.setAttribute("transform",ExtractTrans)
else
ExtractTarget.removeAttribute("transform")
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
jsValue.value=myScript.text
svgSourceValue.value=svgDiv.innerHTML
}
</script>
</body>
</html>
Try to do this using very simple way. I've not applied any animation. I think you'll figure out how to do that.
Remove mouse event from inline
JS
$('svg')
.mouseenter(function(ev) {
console.log($(this).find('circle').attr('r',40));
})
.mouseleave(function(ev) {
console.log($(this).find('circle').attr('r',25));
});
CHECK JSFiddle
Related
I'm making a dragging function for an SVG in which I can drag one of the sag objects anywhere in the container.
I need to drag the blue rectangle infant on the grey rectangle and when I left the key of the button they should swap places, making the grey rectangle go to where the blue one started when I left click on it and the blue rectangle stays where the gray one left off.
I don't know how to proceed with this swap function
function makeDraggable(evt) {
var svg = evt.target;
var selectedElement, offset;
svg.addEventListener('mousedown', startDrag);
svg.addEventListener('mousemove', drag);
svg.addEventListener('mouseup', endDrag);
svg.addEventListener('mouseleave', endDrag);
function startDrag(evt) {
if (evt.target.classList.contains('draggable')) {
selectedElement = evt.target;
offset = getMousePosition(evt);
offset.x -= parseFloat(selectedElement.getAttributeNS(null, "x"));
offset.y -= parseFloat(selectedElement.getAttributeNS(null, "y"));
}
}
function drag(evt) {
if (selectedElement) {
evt.preventDefault();
var coord = getMousePosition(evt);
selectedElement.setAttributeNS(null, "x", coord.x - offset.x);
selectedElement.setAttributeNS(null, "y", coord.y - offset.y);
}
}
function endDrag(evt) {
selectedElement = null;
}
function getMousePosition(evt) {
var CTM = svg.getScreenCTM();
return {
x: (evt.clientX - CTM.e) / CTM.a,
y: (evt.clientY - CTM.f) / CTM.d
};
}
}
.draggable {
cursor: move;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20" onload="makeDraggable(evt)">
<rect x="0" y="0" width="30" height="20" fill="#fafafa" />
<rect x="4" y="5" width="8" height="10" fill="#007bff" />
<rect x="18" y="5" width="8" height="10" fill="#888" />
</svg>
I have a SVG container (Canvas), which has an SVG path (leftLeg) in it. When I drag the SVG path into another div (save), the path goes somewhere else and doesnt hold the position where I dragged it? How Can I solve this? I am using the following libraries:
http://svgdiscovery.com/SVGjs/Plugins/svg.draggable.js
http://svgdiscovery.com/SVGjs/Plugins/svg.connectable.js
I have the following code:
<style>
#canvas {
overflow: hidden;
background-color: #cccccc;
}
<svg id = "canvas" width="100%" height="100%" viewBox="0 0 400 400" z-index="100">
<svg id="dropzone" pointer-events="all" overflow="visible" width="400" height="350" x="90" y="10" fill="white">
<text x="102" y="-2" font-family="sans-serif" font-size="5px" font-weight="bold" fill="black">Drop here</text>
<rect id="dropzoneBox" x="100" y="0" width="50%" height="50%" stroke="black" stroke-dasharray="3"></rect>
</svg>
<svg id = "save" x="190" y="10" width="200" height="175" overflow="visible">
<rect width="100%" height="100%" fill="red" fill-opacity="0" />
</svg>
</svg>
var canvas = SVG('canvas');
save = SVG('save');
function dragIntoBoard(event) {
console.log(event);
//http://svgjs.dev/referencing/#circular-reference
var node = event.target,
svg = node.instance;
var e = event.detail.event,
posX = e.clientX,
posY = e.clientY,
box = save.node.getBoundingClientRect();
//If the element is dropped on top of #save,
//we move the element from the #canvas wrapper into #save:
if( (box.left <= posX) && (posX <= box.right) &&
(box.top <= posY) && (posY <= box.bottom) ) {
save.add(svg);
//Make the circle's position relative to #save, not #canvas:
svg.cx(svg.cx() - save.x());
svg.cy(svg.cy() - save.y());
//No need to listen for more dragging:
svg.off('dragend.namespace');
}
}
function leftLeg()
{
var lines = canvas.group();
lines.attr({"stroke-width":1})
var markers = canvas.group();
var nodes = canvas.group();
var g1 = nodes.group().translate(50, 100).draggable();
g1.circle(1.5).fill("#000");
var g2 = nodes.group().translate(50, 120).draggable();
g2.circle(1.5).fill("#000");
var g3 = nodes.group().translate(50, 140).draggable();
g3.circle(1.5).fill("#000");
g1.connectable({ //---main, central element---
container: lines,
markers: markers
}, g2).setLineColor("#000");
g2.connectable({
}, g3).setLineColor("#000")
var group = canvas.group()
group.add(lines)
group.add(g1)
group.add(g2)
group.add(g3)
group.draggable();
group.on('dragend.namespace', dragIntoBoard);
}
I found some interesting code on petercollingridge.co.uk for dragging SVGs.
After a while of trying to get it to work in my project, I decided to just try to get Peter's code to run in a fiddle.
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
<style>
.draggable {
cursor: move;
}
</style>
<script type="text/ecmascript">
< ![CDATA[
var selectedElement = 0;
var currentX = 0;
var currentY = 0;
var currentMatrix = 0;
function selectElement(evt) {
selectedElement = evt.target;
currentX = evt.clientX;
currentY = evt.clientY;
currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7, -1).split(' ');
for (var i = 0; i < currentMatrix.length; i++) {
currentMatrix[i] = parseFloat(currentMatrix[i]);
}
selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
}
function moveElement(evt) {
var dx = evt.clientX - currentX;
var dy = evt.clientY - currentY;
currentMatrix[4] += dx;
currentMatrix[5] += dy;
selectedElement.setAttributeNS(null, "transform", "matrix(" + currentMatrix.join(' ') + ")");
currentX = evt.clientX;
currentY = evt.clientY;
}
function deselectElement(evt) {
if (selectedElement != 0) {
selectedElement.removeAttributeNS(null, "onmousemove");
selectedElement.removeAttributeNS(null, "onmouseout");
selectedElement.removeAttributeNS(null, "onmouseup");
selectedElement = 0;
}
}
]] >
</script>
<rect x="0.5" y="0.5" width="399" height="199" fill="none" stroke="black" />
<rect class="draggable" x="30" y="30" width="80" height="80" fill="blue" transform="matrix(1 0 0 1 25 20)" onmousedown="selectElement(evt)" />
<rect class="draggable" x="160" y="50" width="50" height="50" fill="green" transform="matrix(1 0 0 1 103 -25)" onmousedown="selectElement(evt)" />
</svg>
I'm still getting the errors I was in my project, those being:
" Uncaught SyntaxError: Unexpected token <" and "Uncaught ReferenceError: selectElement is not defined "
I read something about invisible characters causing the first problem if you copy/paste code, but I haven't found any.
Thanks for any help you can offer.
Like others said, just remove the CDATA jumbo. Here is an updated fiddle:
https://jsfiddle.net/88pocqsr/1/
We've removed < ![CDATA[ and ]]>
Change the line
< ![CDATA[
to
<![CDATA[
(remove space between < and !)
and the line
]] >
to
]]>
I have couple of rectangles inside a group, I want them to move in a group when the outer rectangle is dragged, But I should also be able to move the inner rectangles individually, I can do this separately, but I cannot make them work in same time. Here is the fiddle. Can anyone help me on this?
<svg width="500" height="500" style="background-color: red">
<g class="big">
<rect class="sqr" height="200" width="400" x="40" y="40" style="fill:blue"></rect>
<rect class="sqr" height="50" width="50" x="100" y="100" initial-x="100" initial-y="100" style="fill:green"></rect>
<rect class="sqr" height="50" width="50" x="250" y="100" initial-x="100" initial-y="100" style="fill:green"></rect>
</g>
</svg>
<script>
var drag = d3.behavior.drag().on('drag', function(d){
d3.select(this).attr('transform', 'translate('+(d3.event.x)+','+(d3.event.y)+')');
});
var sqDrag = d3.behavior.drag().on('drag', function (d) {
console.log('sqr dragging..');
d3.select(this).attr('x', d3.mouse(this)[0]).attr('y',d3.mouse(this)[1]);
});
var g = d3.select('.big').call(drag);
var r = d3.selectAll('.sqr').on('mousedown', function () {
console.log('sqr clicked');
d3.event.stopPropagation();
}).call(sqDrag);
</script>
Just modify your sqDrag function
var sqDrag = d3.behavior.drag().on('drag', function (d) {
console.log('sqr dragging..');
var id = d3.select(this).attr('id');
if (id === null)
d3.select(this).attr('x', d3.mouse(this)[0]).attr('y',d3.mouse(this)[1]);
else {
var parent = d3.select(this);
var dx = d3.mouse(this)[0] - parent.attr('x');
var dy = d3.mouse(this)[1] - parent.attr('y');
parent.attr('x', d3.mouse(this)[0]).attr('y',d3.mouse(this)[1]);
d3.selectAll("." + id).attr('x', function() {
return Number(d3.select(this).attr('x')) + dx;
}).attr('y', function() {
return Number(d3.select(this).attr('y')) + dy;
});
}
});
Fiddle - https://jsfiddle.net/46ag2x2z/
I am trying to set up an animated icon in svg.
I got the code on a tutorial site ... Everything works except that when I try to delete an iframe in HTML code (the only one), the animation stops working. Why?
I puts you the codes in a zip file. If anyone can help me, it'd be great!
Edit:
HTML :
<!DOCTYPE html>
<html lang="en" style="">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/vendor/jquery.svginject.js"></script>
<script src="js/site.js"></script>
</head>
<body style="background-color:#ffffff">
<img src="img/audio-spectrum-analyzer.svg" data-audiofile="fondspacial.mp3" width="18" class="svg-inject">
</body>
</html>
<iframe style="display:none" frameborder="0" height="0" width="0" src="nothing.html"></iframe>
SVG (image):
<svg id="audio-spectrum-analyzer" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="320px" width="210px" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 210 320" onclick="toggleAudio()">
<g id="eq-bars" height="320px" width="210px" fill="#010101" transform="">
<rect x="00" y="150" height="20" width="10" />
<rect x="20" y="140" height="40" width="10" />
<rect x="40" y="100" height="120" width="10" />
<rect x="60" y="120" height="80" width="10" />
<rect x="80" y="60" height="200" width="10" />
<rect x="100" y="20" height="280" width="10" />
<rect x="120" y="70" height="180" width="10" />
<rect x="140" y="120" height="80" width="10" />
<rect x="160" y="140" height="40" width="10" />
<rect x="180" y="150" height="20" width="10" />
<rect x="200" y="155" height="10" width="10" />
</g>
<defs>
<style type="text/css"><![CDATA[
svg#audio-spectrum-analyzer {
margin: 0 auto;
}
]]></style>
</defs>
<script type="application/javascript"><![CDATA[
var context;
if (typeof AudioContext !== "undefined") {
context = new AudioContext();
}
else if (typeof webkitAudioContext !== "undefined") {
context = new webkitAudioContext();
}
else {
throw new Error('AudioContext not supported. :(');
}
var eqHeight = document.querySelector('svg#audio-spectrum-analyzer > g#eq-bars').getAttribute('height').replace('px', '');
var bars = document.querySelectorAll('svg#audio-spectrum-analyzer rect');
var playing = false;
var audioFileUrl = document.querySelector('svg#audio-spectrum-analyzer').getAttribute('data-audiofile');
if (audioFileUrl === undefined) {
throw new Error('Audio File not defined');
}
var soundSource;
var fft;
var fftSmoothing = 0.6;
var fftMaxValue = 256;
var samples = 128;
var sampleIntervalID;
var ampFactor = 1.25;
var numBars = bars.length;
var soundBuffer;
var request = new XMLHttpRequest();
request.open("GET", audioFileUrl, true);
request.responseType = "arraybuffer";
// Our asynchronous callback
request.onload = function () {
var audioData = request.response;
// The Audio Context handles creating source
// buffers from raw binary data
soundBuffer = context.createBuffer(audioData, true /*make mono*/ );
};
request.send();
function sampleAudio() {
var data = new Uint8Array(fft.frequencyBinCount);
fft.getByteFrequencyData(data);
// Calc bin size to sum freqs into.
// Carve off some of the high-end, lower energy bars (+2)
var bin_size = Math.floor(data.length / (numBars + 2));
// Sum up and average the samples into their bins
for (var i = 0; i < numBars; ++i) {
// Sum this bin
var sum = 0;
for (var j = 0; j < bin_size; ++j) {
sum += data[(i * bin_size) + j];
}
// Duck some of the low-end power
if (i === 0) {
sum = sum * 0.75;
}
// Calculate the average frequency of the samples in the bin
var average = sum / bin_size;
var scaled_average = Math.max(10, ((average / fftMaxValue) * eqHeight) * ampFactor);
// Update eq bar height
bars[i].setAttribute('height', scaled_average);
// Center bar
bars[i].setAttribute('y', (eqHeight - scaled_average) / 2);
}
}
function playSound() {
// create a sound source
soundSource = context.createBufferSource();
// Add the buffered data to our object
soundSource.buffer = soundBuffer;
// Create the FFT
fft = context.createAnalyser();
fft.smoothingTimeConstant = fftSmoothing;
fft.fftSize = samples;
soundSource.connect(fft);
fft.connect(context.destination);
soundSource.noteOn(context.currentTime);
// Start the FFT sampler
sampleIntervalID = setInterval(sampleAudio, 30);
playing = true;
}
function stopSound() {
// Stop the FFT sampler
clearInterval(sampleIntervalID);
if (soundSource) {
soundSource.noteOff(context.currentTime);
}
playing = false;
}
var toggleAudio = function () {
if (!playing) {
playing = true;
playSound();
}
else {
stopSound();
playing = false;
}
}
window.addEventListener('load', function () {
window.toggleAudio = toggleAudio;
}, false);
]]></script>
</svg>
Javascript :
;(function ( $, window, document, undefined ) {
var pluginName = 'svgInject';
function Plugin(element, options) {
this.element = element;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
$(this.element).css('visibility', 'hidden');
this.swapSVG(this.element);
},
swapSVG: function (el) {
var imgURL = $(el).attr('src');
var imgID = $(el).attr('id');
var imgClass = $(el).attr('class');
var imgData = $(el).clone(true).data();
var dimensions = {
w: $(el).attr('width'),
h: $(el).attr('height')
};
$.get(imgURL, function (data) {
var svg = $(data).find('svg');
if (typeof imgID !== undefined) {
svg = svg.attr('id', imgID);
}
if (typeof imgClass !== undefined) {
var cls = (svg.attr('class') !== undefined) ? svg.attr('class') : '';
svg = svg.attr('class', imgClass + ' ' + cls + ' replaced-svg');
}
$.each(imgData, function (name, value) {
svg[0].setAttribute('data-' + name, value);
});
svg = svg.removeAttr('xmlns:a');
var ow = parseFloat(svg.attr('width'));
var oh = parseFloat(svg.attr('height'));
if (dimensions.w && dimensions.h) {
$(svg).attr('width', dimensions.w);
$(svg).attr('height', dimensions.h);
}
//Scale proportionally based on width
else if (dimensions.w) {
$(svg).attr('width', dimensions.w);
$(svg).attr('height', (oh / ow) * dimensions.w);
}
//Scale proportionally based on height
else if (dimensions.h) {
$(svg).attr('height', dimensions.h);
$(svg).attr('width', (ow / oh) * dimensions.h);
}
$(el).replaceWith(svg);
var js = new Function(svg.find('script').text());
js();
});
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
};
})(jQuery, window, document);
Edit site.js to inject SVG on DOM ready.
$(document).ready(function() {
$('.svg-inject').svgInject();
});
NOTE: script in SVG file uses deprecated web audio API.
createBuffer() used to be able to take compressed data and give back decoded samples, but this ability was removed from the spec, because all the decoding was done on the main thread, therefore createBuffer() was blocking other code execution.
Source: MDN