Can't get an svg to animate - svg

I imported an SVG from InkScape using the ReadySetRaphael tool. I wanted to animate the svg, and ease it in. So just for test purposes, i tried to transform it using the animate method.
I keep getting an error to say my object doesnt have a method of "animate". I've checked other SO answers which suggest i have to clone the object and set the final path, but not sure if that does, or how it applies to me?
Here's my js code so far.
//code created using readysetraphael. Original svg made in inkscape.
var rsr = Raphael('rsr', '744.09448', '1052.3622');
var layer1 = rsr.set();
var path2993 = rsr.path("m 344.93716,348.36218 c 0,0 34.17415,-33.06016 -1.26571,-83.92195 -35.43985,-50.86178 39.23699,-38.14634 6.32855,-91.55121 -32.90844,-53.40487 -50.62837,-36.8748 -50.62837,-36.8748 -9.49282,-0.63577 -8.85996,-0.63577 -8.85996,-0.63577");
path2993.attr({
id: 'path2993',
parent: 'layer1',
fill: 'none',
stroke: '#cf0000',
"stroke-width": '2.92',
"stroke-linecap": 'butt',
"stroke-linejoin": 'miter',
"stroke-miterlimit": '4',
"stroke-opacity": '1',
"stroke-dasharray": 'none',
"marker-start": 'none',
"marker-mid": 'none',
"marker-end": 'url(#TriangleInL)'
}).data('id', 'path2993');
layer1.attr({
'id': 'layer1',
'name': 'layer1'
});
var rsrGroups = [layer1];
//Animate svg
rsr.animate({
transform: 's2'
}, 2000);

Your code pulls an animation call over the paper object. As animate() is a member of Element, the call fails.
I assume you're trying to animate a specific shape, e.g. path2993. Simply call it on the relevant element instead:
path2993.animate({transform: 's2'}, 2000);

Related

FabricJS load from SVG as Canvas Objects and not path

When I load the SVG to Canvas, I get the type as path and a path array.
Is it possible to get the type (object) as "Circle", "Rect", "Line", etc, depending upon the path rather than path? OR Is it possible to convert the path to Canvas standard objects like circle, Rect, etc?
I had a same problem, It was described here: FabricJs - Clipping area by SVG object.
I resolved that by bringing the SVG coords like "M0,0H63.7V63.7H0Z" (rect) and create FabricJS path:
fabric.loadSVGFromURL('object.svg', function (objects, options) {
let img1 = new fabric.Path(objects[0].d, {
fill: '#333',
opacity: 1,
hasBorders: true,
hasControls: true,
hasRotatingPoint: true,
selectable: true,
preserveObjectStacking: true,
objectCaching: false,
});
}
And now you have a valid FabricJS object :)
Also, to achieve that I have to combine my svg images into path, without any polygons and other SVG elements.

Gradually change fill in SVG element using transform in Snap SVG

I am trying to simulate gradually "filling" (like water filling a cup) an element in SVG. I run into trouble with mask. For the following, assume inclusion of snap.svg-min.js:
<script>
var s = Snap(500,500);
var a = s.rect(0,100,100,100);
var b = s.ellipse(50,50,30,60);
b.attr({
fill: "white"
});
a.animate({transform: 't0, -100'}, 500, mina.easin);
a.attr({
mask: b
});
</script>
The mask in the a.attr clips the image initially, and shifts that up. I want to fill the ellipse going up.
Somewhat like the inverse of the following:
<script>
var s = Snap(500,500);
var a = s.rect(0,100,100,100);
var b = s.ellipse(50,50,30,60);
b.attr({
fill: "white"
});
a.animate({transform: 't0, -100', mask: b}, 500, mina.easin);
</script>
You're partly there, there's a few different ways, you could probably also use a clip rather than a mask, but here's the way along the lines I think you were trying...
Swap the mask around..
var a = s.rect(0,0,120,120).attr({ fill: 'white', transform: 't0,100' });
var b = s.ellipse(50,50,30,60);
b.attr({
fill: "red",
mask: a
});
a.animate({transform: 't0,60' }, 2000, mina.easin)
jsfiddle

openlayers polygon change color

i'm using OL3 and javascript to draw several polygon on a map. Each polygon came from a database in WKT format like "POLIGON((39 -9, ....))". I can draw them on the map but i want to change fill color of each one, but don't know how to do it.
Here is my code:
//WKTpoly -> this is my array of POLYLINES
var format = new ol.format.WKT();
var vectorArea = new ol.source.Vector({});
for (var i=0;i<WKTpoly.length;i++) {
var featureGeom = format.readFeature(WKTpoly[i]);
featureGeom.getGeometry().transform('EPSG:4326', 'EPSG:3857');
vectorArea.addFeature(featureGeom);
}
VectorMap = new ol.layer.Vector({
name: map,
source: vectorArea,
});
map.addLayer(VectorMap);
Well, after LessThanJake response and some more google search, i found the solution, i had to create a style and call setStyle() before addFeature():
(...)
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: FillColor,
weight: 1
}),
stroke: new ol.style.Stroke({
color: LineColor,
width: 1
})
});
featureGeom.setStyle(style);
(...)
Thanks LessThanJake for pointing the right direction.
Or you can setup the layer to use a function as style
the function signature is
var makeStyle = function(feature,resolution) {
return [styles];
};
You can use this to manage style by feature and resolution (zoom level).
As the function is called at each feature render, you'll need to cache the style in a js object to gain performance.

How can i set a custom cursor for fabric object?

This is not Drawing Mode.
I want according to some condition to be able to change the cursor when I am over some element. Something like
$('#canvasID').css('cursor','pointer');
but this is not working for me. Do you know some property from their library?
After some tests this is working for me:
canvas.observe('mouse:over', function (e) {
if (e.target.get('type') == 'line') {
e.target.hoverCursor = 'crosshair';
}
});
FabricJS have an in-built mechanism for setting custom cursor (unfortunatelly only for hover and move events):
var canvas = new fabric.Canvas('myCanvas');
var circle = new fabric.Circle({
radius: 20, fill: 'red', left: 10, top: 10
});
circle.hoverCursor = 'no-drop';
canvas.add(circle);
More cursor types you can find here.

Place Highstock inside a SVG

can you help me to place a Highchart inside a SVG element instead of an HTML . Cascaded elements work fine. I have already done it with the jquery SVG plot. But Highchart throws an error 13. What can i do?
Kind regards
Markus Breitinger
You can generate chart in div, which will have negative margin. Then use getSVG() function and paste it ot svg element.
http://api.highcharts.com/highcharts#Chart.getSVG()
Unfortunately it is not suppored, highcharts renders the chart in additional divs and adds elements like labels/datalabels as html objects.
But you can copy the SVG of highstock in you SVG. But you will lose all attached events.
Like drag and drop, click ....
Here an Example of it.
http://jsfiddle.net/L6SA4/10/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create a hidden and not attached div container.
var div = $('<div>This is an hidden unatached container.</div>');
// Create the chart
div.highcharts('StockChart', {
chart: {
width: 480,
height: 400,
events: {
load: function () {
// If hidden div was generated, take the svg content and put it into svg.
var stockSvg = $('svg', this.container);
var svgObj = $('#mySvg').svg();
// Force position of highstock
stockSvg.attr('x', 20);
stockSvg.attr('y', 30);
// Replace ugly rect with highstock
$('#container', svgObj).replaceWith(stockSvg);
}
}
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});

Resources