How to set the correct stroke width for a svg rect

Question

I have this svg animation with js and css. Check the link for full animation http://jsfiddle.net/kpk1l/bL90srby/

• How can I have the same stroke width for left/right like top?

.fil0 {fill:#00ACEC;}
.fil1 {fill:#929292;}
.fil2 {fill:#FEFEFE;}
.str0 {stroke:#00ACEC;stroke-width:50px;}
.fil3 {fill:none}
 
html, body {
  height: 100%; 
}
.wrapper {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height:100%;
}

svg {
  max-width: 80%;
  width: 100%; 
}   

#frame-outline {
  stroke-dasharray: 8400;
  stroke-dashoffset: 2000;
  stroke-width: 30px;
  animation: 1s frame-outline 1 forwards;
}
@keyframes frame-outline {
  from {
    stroke-dashoffset: 8000;
  }
  to {
    stroke-dashoffset: 0;
  }
}


#fadeChen {
  display: none
}
.chen {
  float: right;
  height: 100%;
  width: 100%;
  
  transform-origin: 100% 50%;
  animation: main 1s forwards, second 1s forwards ;
  animation-delay:0s;
}

@keyframes main {
  0% {
    transform: scaleX(0);
  }
  
  100% {
     transform: scaleX(1);
  }
}
@keyframes second {
  from {
    width:100%;
  }
  to {
    width:36%;
  }
}

#fadeText {
  display: none
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
  animation-delay: 0s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}






 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X6 -->
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3000px" height="780px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 3000 780"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 
 
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  
  <rect id="fadeChen" class="fil0" width="1061" height="780"> 
  
  </rect>
  
  <g id="fadeText">
  <path id="o" class="fil1" d="M1411 641c148,0 248,-117 248,-251l0 -1c0,-134 -99,-250 -247,-250 -148,0 -248,117 -248,251l0 1c0,134 99,250 247,250zm1 -51c-111,0 -191,-90 -191,-200l0 -1c0,-110 79,-199 190,-199 111,0 191,90 191,200l0 1c0,110 -79,199 -190,199z"/>
   <polygon id="n2" class="fil1" points="1871,304 2129,633 2173,633 2173,147 2120,147 2120,536 1871,220 "/>
   <polygon id="n1" class="fil1" points="1762,633 1816,633 1816,626 1816,235 1816,147 1814,147 1762,147 "/>
   <polygon id="i" class="fil1" points="2276,633 2331,633 2331,147 2276,147 "/>
   <polygon id="k2" class="fil1" points="2543,447 2592,398 2778,633 2847,633 2630,359 2838,147 2767,147 2543,380 "/>
   <polygon id="k1" class="fil1" points="2434,633 2489,633 2489,502 2489,437 2489,147 2434,147 "/>
   <path id="b" class="fil2" d="M103 633l216 0c106,0 176,-49 176,-132l0 -1c0,-67 -46,-100 -104,-117 38,-17 77,-49 77,-112l0 -1c0,-31 -11,-57 -31,-78 -28,-27 -71,-43 -127,-43l-207 0 0 485zm309 -356c0,57 -46,87 -112,87l-144 0 0 -167 148 0c69,0 108,31 108,79l0 1zm27 218l0 1c0,54 -46,87 -119,87l-163 0 0 -171 153 0c85,0 129,31 129,83z"/>
   <polygon id="e2" class="fil2" points="604,633 958,633 958,583 659,583 659,413 923,413 923,363 604,363 "/>
   <polygon id="e1" class="fil2" points="604,197 955,197 955,147 604,147 "/>
 </g>

 <rect id="frame-outline" class="fil3 str0" width="3000" height="780"/>
 </g>
</svg>
</div>

I made it only with css first but I had problem with animation-delay so I used js. * Can you help me optimizing and correcting it?

You have any solution to make it appear on IE (for example now the stroke animation stop on IE and I want it to skip animation and directly show the logo - only for IE)

Answer 1

IE does not support CSS animation of SVG elements. Edge does support it, but it insists that all CSS values have units.

So you'll need to change the lines like this:

stroke-dasharray: 8400;

to this:

stroke-dasharray: 8400px;

.fil0 {fill:#00ACEC;}
.fil1 {fill:#929292;}
.fil2 {fill:#FEFEFE;}
.str0 {stroke:#00ACEC;stroke-width:50px;}
.fil3 {fill:none}
 
html, body {
  height: 100%; 
}
.wrapper {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height:100%;
}

svg {
  max-width: 80%;
  width: 100%; 
}   

#frame-outline {
  stroke-dasharray: 8400px;
  stroke-dashoffset: 2000px;
  stroke-width: 30px;
  animation: 1s frame-outline 1 forwards;
}
@keyframes frame-outline {
  from {
    stroke-dashoffset: 8000px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}


#fadeChen {
  display: none
}
.chen {
  float: right;
  height: 100%;
  width: 100%;
  
  transform-origin: 100% 50%;
  animation: main 1s forwards, second 1s forwards ;
  animation-delay:0s;
}

@keyframes main {
  0% {
    transform: scaleX(0);
  }
  
  100% {
     transform: scaleX(1);
  }
}
@keyframes second {
  from {
    width:100%;
  }
  to {
    width:36%;
  }
}

#fadeText {
  display: none
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
  animation-delay: 0s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X6 -->
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3000px" height="780px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="-50 0 3100 780"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 
 
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  
  <rect id="fadeChen" class="fil0" width="1061" height="780"> 
  
  </rect>
  
  <g id="fadeText">
  <path id="o" class="fil1" d="M1411 641c148,0 248,-117 248,-251l0 -1c0,-134 -99,-250 -247,-250 -148,0 -248,117 -248,251l0 1c0,134 99,250 247,250zm1 -51c-111,0 -191,-90 -191,-200l0 -1c0,-110 79,-199 190,-199 111,0 191,90 191,200l0 1c0,110 -79,199 -190,199z"/>
   <polygon id="n2" class="fil1" points="1871,304 2129,633 2173,633 2173,147 2120,147 2120,536 1871,220 "/>
   <polygon id="n1" class="fil1" points="1762,633 1816,633 1816,626 1816,235 1816,147 1814,147 1762,147 "/>
   <polygon id="i" class="fil1" points="2276,633 2331,633 2331,147 2276,147 "/>
   <polygon id="k2" class="fil1" points="2543,447 2592,398 2778,633 2847,633 2630,359 2838,147 2767,147 2543,380 "/>
   <polygon id="k1" class="fil1" points="2434,633 2489,633 2489,502 2489,437 2489,147 2434,147 "/>
   <path id="b" class="fil2" d="M103 633l216 0c106,0 176,-49 176,-132l0 -1c0,-67 -46,-100 -104,-117 38,-17 77,-49 77,-112l0 -1c0,-31 -11,-57 -31,-78 -28,-27 -71,-43 -127,-43l-207 0 0 485zm309 -356c0,57 -46,87 -112,87l-144 0 0 -167 148 0c69,0 108,31 108,79l0 1zm27 218l0 1c0,54 -46,87 -119,87l-163 0 0 -171 153 0c85,0 129,31 129,83z"/>
   <polygon id="e2" class="fil2" points="604,633 958,633 958,583 659,583 659,413 923,413 923,363 604,363 "/>
   <polygon id="e1" class="fil2" points="604,197 955,197 955,147 604,147 "/>
 </g>

 <rect id="frame-outline" class="fil3 str0" width="3000" height="780"/>
 </g>
</svg>
</div>

Answer 2

The problem regarding the stroke width is actually not related to the stroke-width at all. Your viewport is just to small and some parts of the border are cut of.

If you make the SVG a little wider (or the border use a smaller width) everything is fine. The below exampole changed the viewBox as follows:

viewBox="-50 0 3100 780"

.fil0 {fill:#00ACEC;}
.fil1 {fill:#929292;}
.fil2 {fill:#FEFEFE;}
.str0 {stroke:#00ACEC;stroke-width:50px;}
.fil3 {fill:none}
 
html, body {
  height: 100%; 
}
.wrapper {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height:100%;
}

svg {
  max-width: 80%;
  width: 100%; 
}   

#frame-outline {
  stroke-dasharray: 8400;
  stroke-dashoffset: 2000;
  stroke-width: 30px;
  animation: 1s frame-outline 1 forwards;
}
@keyframes frame-outline {
  from {
    stroke-dashoffset: 8000;
  }
  to {
    stroke-dashoffset: 0;
  }
}


#fadeChen {
  display: none
}
.chen {
  float: right;
  height: 100%;
  width: 100%;
  
  transform-origin: 100% 50%;
  animation: main 1s forwards, second 1s forwards ;
  animation-delay:0s;
}

@keyframes main {
  0% {
    transform: scaleX(0);
  }
  
  100% {
     transform: scaleX(1);
  }
}
@keyframes second {
  from {
    width:100%;
  }
  to {
    width:36%;
  }
}

#fadeText {
  display: none
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
  animation-delay: 0s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}






 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X6 -->
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3000px" height="780px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="-50 0 3100 780"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 
 
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  
  <rect id="fadeChen" class="fil0" width="1061" height="780"> 
  
  </rect>
  
  <g id="fadeText">
  <path id="o" class="fil1" d="M1411 641c148,0 248,-117 248,-251l0 -1c0,-134 -99,-250 -247,-250 -148,0 -248,117 -248,251l0 1c0,134 99,250 247,250zm1 -51c-111,0 -191,-90 -191,-200l0 -1c0,-110 79,-199 190,-199 111,0 191,90 191,200l0 1c0,110 -79,199 -190,199z"/>
   <polygon id="n2" class="fil1" points="1871,304 2129,633 2173,633 2173,147 2120,147 2120,536 1871,220 "/>
   <polygon id="n1" class="fil1" points="1762,633 1816,633 1816,626 1816,235 1816,147 1814,147 1762,147 "/>
   <polygon id="i" class="fil1" points="2276,633 2331,633 2331,147 2276,147 "/>
   <polygon id="k2" class="fil1" points="2543,447 2592,398 2778,633 2847,633 2630,359 2838,147 2767,147 2543,380 "/>
   <polygon id="k1" class="fil1" points="2434,633 2489,633 2489,502 2489,437 2489,147 2434,147 "/>
   <path id="b" class="fil2" d="M103 633l216 0c106,0 176,-49 176,-132l0 -1c0,-67 -46,-100 -104,-117 38,-17 77,-49 77,-112l0 -1c0,-31 -11,-57 -31,-78 -28,-27 -71,-43 -127,-43l-207 0 0 485zm309 -356c0,57 -46,87 -112,87l-144 0 0 -167 148 0c69,0 108,31 108,79l0 1zm27 218l0 1c0,54 -46,87 -119,87l-163 0 0 -171 153 0c85,0 129,31 129,83z"/>
   <polygon id="e2" class="fil2" points="604,633 958,633 958,583 659,583 659,413 923,413 923,363 604,363 "/>
   <polygon id="e1" class="fil2" points="604,197 955,197 955,147 604,147 "/>
 </g>

 <rect id="frame-outline" class="fil3 str0" width="3000" height="780"/>
 </g>
</svg>
</div>