I'm getting to grips with SVG.js
I have a pattern effect that I've created and would like to use in a number of SVG's.
I can create it in one SVG with the following code...
$( document ).ready(function() {
var draw = SVG('geo').size(1200, 1700);
// 100 lines of js creating geometric pattern, effectively this...
var rect = draw.polygon(coordinates).fill('#fff').stroke({ width: 1, color:'#fff'}).opacity(0)
});
This creates an SVG with ID geo. But I'd like to use this code again to generate various SVG's, ideally with different options (colour etc).
SVG('geo') refers to a particular SVG, how do I make it so I can apply this to any SVG I want on the page?
Hope that made sense
You can define a function that does this repeatedly. Something like the following:
function create_svg(dom_id, width, height, coord) {
var draw = SVG(dom_id).size(width, height);
var rect = draw.polygon(coord)
.fill('#fff')
.stroke({
width: 1,
color: '#fff'
})
.opacity(0);
}
$(function() {
create_svg('geo', 1200, 1700, coordinates);
create_svg('geo2', 1000, 1500, other_coordinates);
)};
If you need to use the created SVGs further, later on in the code, you could make the create_svg function return the created SVG object to a variable in your document.ready function.
Related
In my application, which uses highcharts lib, i use svg draw function for my chart load/redraw events.
I set all my chart data to equal value so that all the stacks will have same height, while the real data is kept in temp array that is drawn as svg in this way:
var dataFormat = getLabelByStatus(curCount, yearsObj[i].data[0]);
var css = (point.color == USERS_YEARS_COLOR) ? highchartAttr().dataLabelsBoldStyle : highchartAttr().dataLabelsStyle;
// draw text
var text = renderer.text(dataFormat, -9999, -5).add(point.label);
text.attr({
x: (lineLength - text.getBBox().width) / 3
}).css(css)
This works great but now i want to change this data in a callback function.
I still can access the renderer object, but neither i can find my old printed data to edit it, nor i can find a suitable edit function.
You can save your custom text element in a variable or in the chart like this
chart.customText = chart.renderer.text('Series 1', 140, 140)
.attr({
rotation: -25
})
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
Then you can access it and use attr({text}) to change its text
chart.customText.attr({
text: Math.random()
})
example: http://jsfiddle.net/28nwb7pj/
Actually i found a bypass solution for this.
In the draw function, i added an id attribute so later on it is easy to get it with jquery selector and edit it with .text().
text.attr({
x: (lineLength - text.getBBox().width) / 3,
id: 'text_' + i // id added to make it modifiable
}).css(css)
change text example in callback function:
$('#text_2').children().text(435)
I am building an app in Rails, and I am using a gem called easy_as_pie which enables me to use this Jquery plugin called 'Easy Pie Chart' (http://rendro.github.io/easy-pie-chart/)
I have the pie chart working no problem, using the following code:
$(document).ready(function() {
$('.chart').easyPieChart({
size: 300,
animate: 1400,
lineWidth: 150,
lineCap: "butt",
scaleColor: false,
trackColor: "black",
barColor: "white"
});
});
The question I have, is whether not it would be possible to have the chart load a background image instead of a solid colour. In the documentation it allows you to use a gradient with a function, using the following code:
new EasyPieChart(element, {
barColor: function(percent) {
var ctx = this.renderer.ctx();
var canvas = this.renderer.canvas();
var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop(0, "#ffe57e");
gradient.addColorStop(1, "#de5900");
return gradient;
}
});
I was hoping to get the gradient working, then work on trying to manipulate the function to load in an image. But I have been unsuccessful in even getting the gradient to work.
Provided your gradient example works like it looks, you should be able to draw just about anything you want into the canvas object they've provided. With that in mind, you might be able to draw images like so:
new EasyPieChart(element, {
barColor: function(percent) {
var ctx = this.renderer.ctx();
var canvas = this.renderer.canvas();
var yourImage = new Image();
yourImage.src = "path-to-your-img.jpg";
return ctx.drawImage(yourImage);
}
});
However, Image objects, like <img> tags, require a further GET request to the server to actually load them, so the above probably won't actually work (sorry for the tease). Instead, you'll have to wait for that image to load before calling it, for example:
// Instantiate the image, it's blank here.
var yourImage = new Image();
// Add a callback that uses the fully-loaded img
yourImage.onload = function() {
new EasyPieChart(element, {
barColor: function(percent) {
var ctx = this.renderer.ctx();
var canvas = this.renderer.canvas();
return ctx.drawImage(yourImage);
}
});
};
// Set the src, that queues it for the actual GET request.
yourImage.src = "path-to-your-img.jpg";
I know you can animate path morhs with snap.svg (How to animate path morphs using snap.svg)
Is it possible to 'load' a path and then animate path morph? Or do you HAVE to define the path inside of Snap.svg?
(function($) {
'use strict';
// grab the empty svg element in the html
var s = Snap(800,600);
// load the svg and grab the #arm and its inner elemmnts
Snap.load('body.svg', function(f) {
var arm = f.select('#arm'),
forearm = f.select('#forearm'),
bicep = f.select('#bicep');
s.append(arm);
s.append(forearm);
s.append(bicep);
anim1();
});
// animate rotate the forearm graphic
var anim1 = function() {
forearm.animate({
'transform': 'r45,320,120'
}, 1000, mina.linear, anim2);
};
// animate morph from the svg images current path coordinates top the ones below
var anim2 = function() {
bicep.animate({
d: 'M337.889,188c-12.064-11.708-28.073-93.482-89.777-92.889c-62.222,3.333-93,104.555-93,104.555l1.667,49.445 c29.608,30.553,96.669,99.406,178.333,3.333L337.889,188z'
}, 1000, mina.bounce, anim3);
};
// animate morph from the svg images current path coordinates top the ones below
var anim3 = function() {
forearm.animate({
d: 'M174.333,250.938c0,0,19.659-36.111,17.816-98.333c-25.316-59.032-31.731-75.007-24.267-84.445l-27.338,1.667 c-35.496,57.849-82.325,139.528-1.843,178.334L174.333,250.938z'
}, 1000, mina.bounce);
};
})(jQuery);
jsfiddle here - http://jsfiddle.net/1wqewzs3/2/
Thanks
You can animate following a load or whatever really, the main thing is that the variables are defined somewhere accessible, and the animation is only run after the load.
In this particular case, the main error is that you are defining the arm, forearm, bicep variables within the Snap.load function, and then trying to use them in your animation function (which isn't aware of those variables).
Couple of options...
make arm, forearm, bicep all global variables ( use 'var' at the beginning of your script, if all the relevant bits are in an immediate mode function, it should limit scope which maybe better ). This is probably the simplest.
Write your animation with a select...
s.select('#forearm').animate({
'transform': 'r45,320,120'
}, 1000, mina.linear, anim2);
I'm creating a interactive map with svg and I have converted the svg format to a javasript file (rahpael). I want to put a class on a path element, to create a hover effect, but I can't seem to get it to work:
var path_cz = rsr.path("M513.4,537l-329,19.3L209.5,666c0,0,9.5,36.8,51.5,48.8l108,22.7c13.3-16.7,119-43.4,175.6-8.7l165.7-58.6 c0,0,210.2-54.5,113.6-150.5c-33.3-27.3-61.9-50.4-61.9-50.4l-72.8-5.5l-46.9,2l-154,6.7l-2.6,21L513.4,537z").attr({fill: '#4F217C',parent: 'farver','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_cz');
I've tried .attr("class","classname"); and some other stuff inside .attr, but still nothing..
Any suggestions would be appreciated, thx :)
As you are using Raphael JS, the easiest way to do this is to hook into the hover method that Raphael supplies out of the box and update it that way.
$(document).ready(function() {
var rsr = Raphael(0, 0, 1000, 1000);
var path_cz = rsr.path("M513.4,537l-329,19.3L209.5,666c0,0,9.5,36.8,51.5,48.8l108,22.7c13.3-16.7,119-43.4,175.6-8.7l165.7-58.6 c0,0,210.2-54.5,113.6-150.5c-33.3-27.3-61.9-50.4-61.9-50.4l-72.8-5.5l-46.9,2l-154,6.7l-2.6,21L513.4,537z").attr({fill: '#4F217C',parent: 'farver','stroke-width': '0','stroke- opacity': '1'}).data('id', 'path_cz');
path_cz.hover(function() {
path_cz.node.setAttribute('class', 'one');
}, function() {
path_cz.node.setAttribute('class', 'two');
});
});
For an example, here is a fiddle: http://jsfiddle.net/n9Mt6/1/
Looking for some advice (example would be great) on dragging and dropping SVGs using RaphaelJS.
I have found how to drag an object created withint Raphael
window.onload = function() {
var R = Raphael("canvas", 500, 500);
var c = R.circle(100, 100, 50).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5
});
var start = function () {
...
},
move = function (dx, dy) {
...
},
up = function () {
...
};
c.drag(move, start, up);
};
But I need to be able to adapt this to work with a seperate SVG file(s) so for example
myPage.html has myImage.svg, I need to be able to drag myImage.svg around the 'canvas'.
I'm thinking something like
var c = R.SOMEMETHOD('myImage.svg');
...
c.drag(move, start, up);
For example.
Is there a way to do this and if so, an example would be brilliant!
This magic method doesn't exist in RaphaelJS. But there is a way to accomplish this. You can have a look at the raphael-svg-import project on GitHub which works well for basic svgs
Then, you'll want to use a grouping facility as you cannot use the Set functionnality of RaphaelJS
1 - import your SVG
2 - As you import, mark the elements so they belong to the same group
Enjoy !!