SVG未显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SVG未显示相关的知识，希望对你有一定的参考价值。
我需要虚线。 <hr>不会这样做，因为点之间需要更多的空间，除非有办法通过CSS实现这一点？它也没有在我需要的三个Bootstrap列中正确显示。如果有办法解决这个问题，我可以解决它。
我复制了一个我发现的随机SVG行，以便尝试自定义它。
https://jsfiddle.net/eliranmal/hsfxS/
<svg width="357px" height="2px" viewBox="0 0 300 200">
<line x1="40" x2="260" y1="100" y2="100" stroke="#5184AF" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 30"/>
</svg>什么都没有出现。我已经看到一个建议添加<html xmlns="http://www.w3.org/1999/xhtml">在头部和<svg xmlns="http://www.w3.org/2000/svg"这没有帮助。
答案
viewBox高度为200，而svg高度为height="2px"。 svg元素的width和height与viewBox大小不成比例。
一种解决方案是删除svg元素的高度：
svg{border:1px solid;}<svg width="357" viewBox="0 0 300 200" >
<line x1="40" x2="260" y1="100" y2="100" stroke="red" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 30"/>
</svg>以上是关于SVG未显示的主要内容，如果未能解决你的问题，请参考以下文章