Я пытаюсь создать соединенную вертикальную и горизонтальную линию, используя путь SVG.

Контейнер не квадратный (высота: 200 пикселей, ширина: 400 пикселей). Это разрешается в некоторых странных графиках, где вертикальная линия отличается от горизонтальной. Я хочу, чтобы вертикальная линия выглядела как горизонтальная линия. Как я могу это сделать? Если контейнер квадратный, проблемы нет, но я не могу использовать это решение. Пример кода:

<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
Vingtoft 28 Окт 2015 в 01:21

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>
2
maioman 27 Окт 2015 в 22:30

Установите 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>
1
321polorex123 27 Окт 2015 в 22:25