如何为 svg 矩形设置正确的笔画宽度

Question

我有这个带有 js 和 css 的 svg 动画。检查 link 以获得完整动画 http://jsfiddle.net/kpk1l/bL90srby/

如何让 left/right 的笔划宽度与顶部相同？

.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>

我最初只用 css 做到了，但我遇到了动画延迟问题，所以我使用了 js。 * 能帮我优化改正吗？

你有什么解决办法让它出现在 IE 上（例如现在笔画动画在 IE 上停止，我希望它跳过动画并直接显示徽标 - 仅适用于 IE）

Answer 1

关于笔划宽度的问题实际上与stroke-width根本无关。您的视口太小，边框的某些部分被切掉了。

如果你让 SVG 更宽一点（或者边框使用更小的宽度），一切都很好。下面的例子改变了 viewBox 如下：

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>

Answer 2

IE 不支持 CSS SVG 元素的动画。 Edge 支持它，但它坚持所有 CSS 值都有单位。

因此您需要像这样更改行：

stroke-dasharray: 8400;

对此：

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>

如何为 svg 矩形设置正确的笔画宽度

How to set the correct stroke width for a svg rect

javascript

css

animation

svg

stroke