Can't animate lines with x/y as percentage

[donaldallen]

<svg id="square" x="0px" y="0px" width="100%" height="100%">
    <line fill="#FFFFFF" stroke="#000000" stroke-width="20" x1="0" y1="0" x2="100%" y2="0"/>
    <line fill="#FFFFFF" stroke="#000000" stroke-width="20" x1="100%" y1="0" x2="100%" y2="100%"/>
    <line fill="#FFFFFF" stroke="#000000" stroke-width="20" x1="100%" y1="100%" x2="0" y2="100%"/>
    <line fill="#FFFFFF" stroke="#000000" stroke-width="20" x1="0" y1="100%" x2="0" y2="0"/>
</svg>

Returns the following error in the console:

[Error] Error: Problem parsing d="M0,0L100%,0"
    pathMaker (app.min.js, line 1)
    scan (app.min.js, line 1)
    t (app.min.js, line 1)
    e (app.min.js, line 1)
    (anonymous function) (app.min.js, line 1)
    j (jquery-1.11.1.min.js, line 2)
    fireWith (jquery-1.11.1.min.js, line 2)
    ready (jquery-1.11.1.min.js, line 2)
    J (jquery-1.11.1.min.js, line 2)
[Error] Error: Problem parsing d="M100%,0L100%,100%"
    pathMaker (app.min.js, line 1)
    scan (app.min.js, line 1)
    t (app.min.js, line 1)
    e (app.min.js, line 1)
    (anonymous function) (app.min.js, line 1)
    j (jquery-1.11.1.min.js, line 2)
    fireWith (jquery-1.11.1.min.js, line 2)
    ready (jquery-1.11.1.min.js, line 2)
    J (jquery-1.11.1.min.js, line 2)
[Error] Error: Problem parsing d="M100%,100%L0,100%"
    pathMaker (app.min.js, line 1)
    scan (app.min.js, line 1)
    t (app.min.js, line 1)
    e (app.min.js, line 1)
    (anonymous function) (app.min.js, line 1)
    j (jquery-1.11.1.min.js, line 2)
    fireWith (jquery-1.11.1.min.js, line 2)
    ready (jquery-1.11.1.min.js, line 2)
    J (jquery-1.11.1.min.js, line 2)
[Error] Error: Problem parsing d="M0,100%L0,0"
    pathMaker (app.min.js, line 1)
    scan (app.min.js, line 1)
    t (app.min.js, line 1)
    e (app.min.js, line 1)
    (anonymous function) (app.min.js, line 1)
    j (jquery-1.11.1.min.js, line 2)
    fireWith (jquery-1.11.1.min.js, line 2)
    ready (jquery-1.11.1.min.js, line 2)
    J (jquery-1.11.1.min.js, line 2)

Is this not possible with percentages?

[maxwellito]

I didn't even though about this case. Unfortunately, it won't work. Let me explain.

To use the animation, the SVG must only contain path elements. But we cannot use percentages in path elements. The only workaround is to use viewBox.

Your SVG would look like this:

<svg id="square" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 100 100">
  <line fill="#FFFFFF" stroke="#000000" stroke-width="20" x1="0" y1="0" x2="100" y2="0"/>
  <line fill="#FFFFFF" stroke="#000000" stroke-width="20" x1="100" y1="0" x2="100" y2="100"/>
  <line fill="#FFFFFF" stroke="#000000" stroke-width="20" x1="100" y1="100" x2="0" y2="100"/>
  <line fill="#FFFFFF" stroke="#000000" stroke-width="20" x1="0" y1="100" x2="0" y2="0"/>
</svg>