SVG:在非方形容器中连接垂直和水平虚线路径

时间:2015-10-27 22:21:59

标签: svg

我正在尝试使用SVG路径创建连接的垂直和水平线。

容器不是方形(高度:200px,宽度:400px)。 这解决了一些奇怪的图形,其中垂直线看起来与水平不同。 我希望垂直线看起来像水平线。我怎样才能做到这一点? 如果容器是方形的,则问题不存在,但这不是我可以使用的解决方案。 示例代码:

<svg height="200" width="400" preserveAspectRatio="none" viewBox="0 0 100 100">
    <path stroke="#000" stroke-width="1.5" fill="none" d="M1 1 v53 h55" stroke-dasharray="5,5" />
</svg>

请参阅此示例:https://jsfiddle.net/x5bgukar/

2 个答案:

答案 0 :(得分:2)

您可以使用preserveAspectRatio='xMinYMin'

强制进行统一缩放

    <svg height="200" width="400" preserveAspectRatio="xMinYMin" viewBox="0 0 100 100">
    <path stroke="#000" stroke-width="1.5" fill="none" d="M1 1 v53 h55" stroke-dasharray="5,5" />
</svg>

答案 1 :(得分:1)

根据宽度和高度设置<svg height="200" width="400" preserveAspectRatio="none" viewBox="0 0 400 200"> <path stroke="#000" stroke-width="1.5" fill="none" d="M1 1 v53 h55" stroke-dasharray="5,5" stroke-dashoffset="0.00" /> </svg>

public GetOpenConnectionException(Exception innerException) :
    base(innerException.message, innerException)
{
}