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

【问题标题】：SVG: Connect vertical and horizontal dotted path in a non square containerSVG：在非方形容器中连接垂直和水平虚线路径
【发布时间】：2015-10-27 22:21:58
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

标签： svg

【解决方案1】：

您可以使用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>

【讨论】：

【解决方案2】：

根据宽高设置viewbox：

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

【讨论】：