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

【问题标题】：How to set the correct stroke width for a svg rect如何为 svg rect 设置正确的笔画宽度
【发布时间】：2018-02-21 17:44:59
【问题描述】：

我有这个带有 js 和 css 的 svg 动画。查看完整动画链接http://jsfiddle.net/kpk1l/bL90srby/

  • 我怎样才能让左/右的笔触宽度像顶部一样？

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

【问题讨论】：

    标签： javascript css animation svg stroke


    【解决方案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>

    【讨论】：

    • 谢谢！您能否检查链接中的完整动画并告诉我所有代码是否都很好，以及我是否必须为其他浏览器更正某些内容？
    • 对于 IE，我可以制作类似 ..
    • 如果您的代码正在运行并且您正在寻找改进或建议，那么codereview.stackexchange.com 可能是更好的选择。关于 IE：在我看来，这只是一个调试任务。打开开发工具并按照错误消息进行处理。目前您正在使用一些 IE 不支持的 API（我至少看到一个关于 classList 的错误）。
    • 好的。我会检查那个网站。谢谢
    【解决方案2】：

    IE 不支持 SVG 元素的 CSS 动画。 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>

    【讨论】：

    • 好的。谢谢。最后我改变了stroke-dashoffset的值：2000px;到 800 在 IE 中没有停止
    猜你喜欢
    • 1970-01-01
    • 2015-11-03
    • 1970-01-01
    • 1970-01-01
    • 2018-02-26
    • 1970-01-01
    • 2010-11-21
    • 2016-05-02
    • 2012-02-17
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode