Responsive width and height
Closed this issue · 8 comments
Is there anyway of creating a svg with a percentage so when you reduce the screens width & height it fits? I assume there's no way of doing this as it's already a coded svg
You might want to check this : #20
and adjust the ratioScale according to the window's width. It worked for me.
I will send a pull request or a fork soon
Hi! Somewhat of a noob here. I already made the necessary adjustments in the unminified version of the js (according to #20) but is there something that I need to change in my app...?
$(document).ready(function(){
$('#svg').lazylinepainter({
'svgData': svgData,
'strokeWidth': 1,
'strokeColor': '#ffffff',
'ratioScale' : 2,
'onComplete': function() {
}
})
$('#svg').lazylinepainter('paint');});
I'm assuming instead of "'ratioScale' : 2," it should be something else?
no ratioScale is ok.
Can you try this:
$('#svg').lazylinepainter({
'svgData': svgData,
'strokeWidth': 1,
'strokeColor': '#ffffff',
'ratioScale' : 2,
}).lazylinepainter('paint');
It might be that you are calling the function 2 times.
I modified the minified version of the js, here you go :
/*
- Lazy Line Painter 1.4.1
- SVG Stroke animation.
* - https://github.com/camoconnell/lazy-line-painter
- http://www.camoconnell.com
* - Copyright 2013 Cam O'Connell
- Licensed under the MIT license.
*
_/
(function(e,t,n){var r={init:function(t){return this.each(function(){var n=e(this),r=n.data("lazyLinePainter");n.addClass("lazy-line");if(!r){var r=e.extend({width:null,height:null,strokeWidth:2,strokeColor:"#000",strokeCap:"round",strokeJoin:"round",ratioScale:null,strokeOpacity:1,strokeDash:null,onComplete:null,delay:null,overrideKey:null},t),i=null===r.overrideKey?n.attr("id").replace("#",""):r.overrideKey,s=r.svgData[i].dimensions.width,o=r.svgData[i].dimensions.height;r.svgData=r.svgData[i].strokepath;null===r.width&&(r.width=s);null===r.height&&(r.height=o);i=n.attr("id");s=new Raphael(i,s_r.ratioScale,o_r.ratioScale);s.setViewBox(0,0,r.width/r.ratioScale,r.height/r.ratioScale,true);n.data("lazyLinePainter",{svgData:r.svgData,width:r.width,height:r.height,strokeWidth:r.strokeWidth,strokeColor:r.strokeColor,strokeCap:r.strokeCap,strokeJoin:r.strokeJoin,strokeOpacity:r.strokeOpacity,strokeDash:r.strokeDash,onComplete:r.onComplete,delay:r.delay,overrideKey:r.overrideKey,paper:s,count:1,complete:!1,playhead:0,setTimeOutHandler:[]})}})},paint:function(){return this.each(function(){var t=e(this),n=t.data("lazyLinePainter"),r=function(){t.css({width:n.width,height:n.height});e.each(n.svgData,function(e,r){var i=n.paper.path(r.path);i.attr({stroke:"none","stroke-width":n.strokeWidth,"fill-opacity":0});var u=setTimeout(function(){o({count:n.count,canvas:n.paper,pathstr:i,duration:r.duration,attr:s(n,r),callback:function(e){n.setTimeOutHandler.splice(n.count,1);n.count++;n.svgData.length+1==n.count&&(n.complete=!0,null!==n.onComplete&&n.onComplete.call(t))}})},n.playhead);n.playhead+=r.duration;n.setTimeOutHandler.push(u)})};null===n.delay?r():setTimeout(r,n.delay)})},erase:function(){return this.each(function(){var t=e(this);t.find("svg").empty();d=t.data("lazyLinePainter");for(i=0;i<d.setTimeOutHandler.length;i++)clearTimeout(d.setTimeOutHandler[i]);d.playhead=0;d.count=0;d.complete=!1})},destroy:function(){return this.each(function(){var t=e(this);t.data("lazyLinePainter");t.removeData("lazyLinePainter");t.remove()})},stamp:function(){return this.each(function(){var t=e(this),n=t.data("lazyLinePainter"),r=function(){t.css({width:n.width,height:n.height});for(i=0;i<n.svgData.length;i++)n.paper.path(n.svgData[i].path).attr(s(n,n.svgData[i]))};null===n.delay?r():setTimeout(r,n.delay)})}},s=function(e,t){return{stroke:t.strokeColor?t.strokeColor:e.strokeColor,"fill-opacity":0,"stroke-dasharray":t.strokeDash?t.strokeDash:e.strokeDash,"stroke-opacity":t.strokeOpacity?t.strokeOpacity:e.strokeOpacity,"stroke-width":t.strokeWidth?t.strokeWidth:e.strokeWidth,"stroke-linecap":t.strokeCap?t.strokeCap:e.strokeCap,"stroke-linejoin":t.strokeJoin?t.strokeJoin:e.strokeJoin}},o=function(e){var t=e.canvas,r=e.pathstr,i=e.duration,s=e.attr,o=e.callback,u;u="string"==typeof r?t.path(r).attr({stroke:"none",fill:"none"}):r;var a=t.path(u.getSubpath(0,1)).attr(s),f=u.getTotalLength(u);u.getPointAtLength(0);var l=(new Date).getTime(),c=setInterval(function(){var e=(new Date).getTime()-l,t=u.getSubpath(0,e/i_f);s.path=t;a.animate(s,25);e>=i&&(clearInterval(c),o!==n&&o(),u.remove())},25)};e.fn.lazylinepainter=function(e){if(r[e])return r[e].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof e||!e)return r.init.apply(this,arguments)}})(jQuery,window)
Hey, after playing around I figured out a solution that works really well for me and is fully responsive.
Download the latest raphael.js and update the below area (line 6997). I removed width, height, etc., and added viewBox, preserveAspectRatio, and class (You could probably insert the width and height into your viewbox with the width and height variables.)
$(cnvs, {
version: 1.1,
viewBox: 0 + " " + 0 + " " + 500 + " " + 500,
xmlns: "http://www.w3.org/2000/svg",
preserveAspectRatio: "xMinYMin meet",
class: "svg-content"
});
Include the below code in your site's .css to give your svg a width of 100% of it's parent container:
.lay-line {
display: inline-block;
position: relative;
width: 100%;
vertical-align: middle;
overflow: hidden;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
That's it! Good luck!
Hey guys I found a way to make it responsive without changing raphael.js
Changes on jquery.lazylinepainter-1.4.1.js
- Search this part and add the ratioScale line:
var o = $.extend( {
'width' : null,
'height' : null,
'strokeWidth' : 2,
'strokeColor' : '#000',
'strokeCap' : 'round',
'strokeJoin' : 'round',
'ratioScale' : 1, // <----- ADD THIS LINE
'strokeOpacity' : 1,
'strokeDash' : null,
'onComplete' : null,
'delay' : null,
'overrideKey' : null
}, options);- Change Raphael Constructor
var paper = new Raphael($s, $w * o.ratioScale , $h * o.ratioScale);
paper.setViewBox(0,0, o.width / o.ratioScale, o.height / o.ratioScale,true);- Remove the lines that set the width and height of the svg
$this.data( dataKey , {
'svgData' : o.svgData,
// 'width' : o.width, <-----REMOVE THIS LINE
// 'height' : o.height, <-----REMOVE THIS LINE
'strokeWidth' : o.strokeWidth,
'strokeColor' : o.strokeColor,
'strokeCap' : o.strokeCap,
'strokeJoin' : o.strokeJoin,
'strokeOpacity' : o.strokeOpacity,
'strokeDash' : o.strokeDash,
'onComplete' : o.onComplete,
'delay' : o.delay,
'overrideKey' : o.overrideKey,
'paper' : paper,
'count' : 1,
'complete' : false,
'playhead' : 0,
'setTimeOutHandler' : []
});On your CSS add this:
.lazy-line svg {
width:100% !important;
}That's all.
Hi,
I made the changes you mentioned @jgnatch , but my svg still won't resize and is just keeping the inline generated dimensions (actually, the svg is technically adjusting the width... technically, because the height remains the same; I was trying to set the height as auto, but didn't change anything). Do you have any idea what else could I check then? Just in case, my raphael is up to date.
Thanks
Hi @lemonvine - lazylinepainter 1.5 no longer requires Raphael and now has a 'responsive' option, set this to true and the SVG will respond to the width and height of its parent element.