如何制作没有图像的虚线

Question

如何制作虚线。查看附图以获取更多信息。

目前我用于直线（CSS）和用于交叉线（SVG）。我想制作虚线而不是实线。

代码用于交叉线

<svg height="170" width="150" class="line1"><line fill="none" stroke="#496e97" stroke-miterlimit="10" x1="4" y1="70" x2="143" y2="172"/></svg>

任何帮助都会表示赞赏。

Answer 1

在SVG线路上使用stroke-dasharray 有关解释和示例，请查看：MDN - stroke-dasharray

Answer 2

对于水平/垂直线，边框必须是点缀而不是实线（请参阅http://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-style），您可以使用border-bottom和border-left，不是需要点缀所有4个边框。

CSS3不能绘制对角线。所以你必须以某种方式欺骗它。 对于交叉线来说，事情更复杂。你有很多解决方案，但我最喜欢的是用您需要的度数旋转<hr>标签。 （例如：http://jsfiddle.net/bernie1227/FDCfx/）。

hr
{
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg);
-o-transform:rotate(15deg);
}

另一个有用的解决方案可能是：使用Javascript在2个点之间画一条线。 示例：How to draw a line between two divs?

而且，至少，我也找到了这个解决方案解决方案：erezsh.wordpress.com/2008/07/31/drawing-diagonal-lines-with-css/，但是，在我看来，它非常复杂。< / p>

Answer 3

我看不到您的HTML和CSS，但如果您使用的是实线，并且假设您拥有此CSS：

.straight-line { border: 1px solid red; }

像这样：

.straight-line { border: 1px dotted red; }

Answer 4

SVG解决方案 - 使用属性“Stroke Dasharry”

<强> Fiddle

SVG：

<svg height="170" width="150" class="line1">
    <line fill="none" stroke="#496e97" stroke-miterlimit="10" x1="4" y1="70" x2="143" y2="70" stroke-dasharray="5,5" />
</svg>

stroke-dasharry - Documentation ， Demo.

CSS解决方案 - 使用属性“border-style：dashed”

<强> Fiddle

的CSS：

.straight-line{
    width: 150px;
    border-top: 1px dotted #496e97;
}

但请注意，您无法增加css虚线边框与svg匹配的差距请点击此 link 查看详情。

我建议在你的情况下使用svg甚至是直线，这样就可以更容易地将两行都用相同的值。

Answer 5

最后我得到了解决方案。

直线

<svg height="80" width="375" class="line1"><line fill="none" stroke="#496e97" stroke-linecap="round" stroke-dasharray="2, 3" stroke-miterlimit="10" x1="4" y1="71" x2="375" y2="71"/></svg>

对于交叉线

<svg height="170" width="150" class="line1"><line fill="none" stroke="#496e97" stroke-linecap="round" stroke-dasharray="2, 3" stroke-miterlimit="10" x1="4" y1="70" x2="143" y2="172"/></svg>

感谢您的评论!!