Menu icon Foundation
svg with lazy-line-painter responsive

I hope, my english is readable ;)

I have a problem with a svg-image made with lazy-line-painter
http://lazylinepainter.info/
https://github.com/camoconnell/lazy-line-painter

I want to have a path-animated svg on the top of my page.
The svg must have the width from a row and automatic resize (only on load, not on resize the window) on small, medium, large screens.

I found a supplement for "ratioScale" here:

Changes of jquery.lazylinepainter-1.4.1.js
https://github.com/camoconnell/lazy-line-painter/issues/20

This is working. The size of the svg is changing. But first, I can't center! And the value of ratioScale is constant on every screen.

Then I found this:

Last post from oakleyhall
Changes of raphael_2.1.2.mod.js (.mod= is modified from me)
https://github.com/camoconnell/lazy-line-painter/issues/23

He says, that this is working for him.

But it does not work for me.

I have played with many classes, with Firefox-Inspector, ... and so on

I can make it center, but it centered on svg-width:1379 and not on row:width
Sometimes the svg is (absolute) behind the following text. If not, if have a great gap between svg and the following text.

I don't know how it goes on.
I want to have an "on-load-responsive" container with my svg on top of the page. Not more.

I hope somebody can help me.

Thanks.

Here is a test-page
the code is following, the svg is there: div id="test"

svglazy-lineResponsive

I hope, my english is readable ;)

I have a problem with a svg-image made with lazy-line-painter
http://lazylinepainter.info/
https://github.com/camoconnell/lazy-line-painter

I want to have a path-animated svg on the top of my page.
The svg must have the width from a row and automatic resize (only on load, not on resize the window) on small, medium, large screens.

I found a supplement for "ratioScale" here:

Changes of jquery.lazylinepainter-1.4.1.js
https://github.com/camoconnell/lazy-line-painter/issues/20

This is working. The size of the svg is changing. But first, I can't center! And the value of ratioScale is constant on every screen.

Then I found this:

Last post from oakleyhall
Changes of raphael_2.1.2.mod.js (.mod= is modified from me)
https://github.com/camoconnell/lazy-line-painter/issues/23

He says, that this is working for him.

But it does not work for me.

I have played with many classes, with Firefox-Inspector, ... and so on

I can make it center, but it centered on svg-width:1379 and not on row:width
Sometimes the svg is (absolute) behind the following text. If not, if have a great gap between svg and the following text.

I don't know how it goes on.
I want to have an "on-load-responsive" container with my svg on top of the page. Not more.

I hope somebody can help me.

Thanks.

Here is a test-page
the code is following, the svg is there: div id="test"

Thomas K. almost 5 years ago

<head>
...

<script src="js/jquery-2.1.1.min.js"></script>
<!-- <script src="js/raphael-min.js"></script> -->
<script src="js/raphael_2.1.2.mod.js"></script>
<!-- <script src="js/jquery.lazylinepainter-1.4.1.min.js"></script> -->
<script src="js/jquery.lazylinepainter-1.4.1.js"></script>  

    <style type="text/css">
        body {
            background: #CCCCCC;
        }
        .columns.othercolor {
            background: #DDAA22;
        }
        .columns.mytextcolor {
            background: #EEEEEE;
        }
        .lazy-line {
            display: inline-block;
            position: relative;
            width: 100%;
            vertical-align: middle;
            overflow: hidden;
        }

        .svg-content {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
        }
        #test {
            background: #EEBB99;
        }
    </style>

    <script> 
      (function( $ ){  
            var pathObj = {
                "test": {
                    "strokepath": [
                        {
                            "path": "M14 50c126,-13 1364,-49 1364,-49l-46 766 -1331 -26",
                            "duration": 2500
                        },
                        {
                            "path": "M 14 93 L 1 698",
                            "duration": 1200
                        }
                    ],
                    "dimensions": {
                        "width": 1379,
                        "height": 768
                    }
                }
            }; 

         $(document).ready(function(){ 
         $('#test').lazylinepainter( 
         {
            "svgData": pathObj,
            "strokeWidth": 5,
            "strokeColor": "#B21C6E",
            "ratioScale" : 0.6
        }).lazylinepainter('paint'); 
      });
    })( jQuery );

    </script>

  </head>
  <body>

    <div class="row">
      <div class="medium-12 medium-centered large-12 large-centered columns othercolor">
        <div id="test"></div>
      </div>
    </div>

    <div class="row">
      <div class="large-6 medium-6 columns smaller mytextcolor">
        <p>
        <center><strong>Lorem ipsum </strong></center>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      </div>
      <div class="large-6 medium-6  columns smaller mytextcolor">
        <p>
        <center><strong>Lorem ipsum </strong></center>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      </div>
    </div>

...

Thomas K. almost 5 years ago

I have a workaround. But it works only in Firefox. Chrome and IE do not scale.
Anybody knows why?

Here is the code around $(document).ready function:

        $(document).ready(function(){ 

            svgfaktor = (document.all.basisdiv.offsetWidth*0.8) / 1379;

            $('#test').lazylinepainter({
                "svgData": pathObj,
                "strokeWidth": 3,
                "strokeColor": "#DAA520",
                "ratioScale" : 1 //svgfaktor 
            }).lazylinepainter('paint');
            svgfaktor = (document.all.basisdiv.offsetWidth*0.8) / 1379;
            document.getElementsByTagName("svg")[0].setAttribute("viewBox", "0 0 1379 768");
            document.getElementsByTagName("svg")[0].setAttribute("transform", "scale(" + svgfaktor +")");
            $('#test').css('width', svgfaktor*1379);
            $('#test').css('height', svgfaktor*768);
            $('#test').css('margin-left', (document.all.basisdiv.offsetWidth - (svgfaktor*1379)) / 2);

and here the html-code

    <div id="basisrow" class="row">
      <div id="basisdiv" class="small-12 small-centered columns">
        <div id="test"></div>
      </div>
    </div>

Thomas K. almost 5 years ago

This line works only in Firefox (I have v 32)

document.getElementsByTagName("svg")[0].setAttribute("transform", "scale(" + svgfaktor +")");

I have changed the line to this:

document.getElementsByTagName("svg")[0].setAttribute('width', 1464*svgfaktor);
document.getElementsByTagName("svg")[0].setAttribute('height', 815*svgfaktor);

Now my workaround does it on Firefox, Chrome, Opera and IE

But really smart, I'm still not

For me it's enough. Maybe someone with similar problems reads this and finds a different answer or confirms my solution.

Thank you