Внешний вид объекта SVG в мобильном представлении отличается от просмотра на рабочем столе
body {
margin: 0vh 0vw;
}
.header {
position: relative;
width: 100%;
height: 12vh;
background-color: #004d40;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
top: 0;
}
.line {
position: absolute;
left: 0;
top: calc(50%);
width: 100%;
height: 0.25vh;
background-color: white;
z-index: 1;
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0%);
z-index: 2;
}<!DOCTYPE html>
<html lang = "tr">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>SVG Header with Half Circle</title>
</head>
<body>
<div class = "header">
<div class = "line"></div>
<svg width = "10vw" height = "5vh" viewBox = "0 0 100 50" xmlns = "http://www.w3.org/2000/svg">
<path d = "M0,0 A50,50 0 0,0 100,0" fill = "#004d40" stroke = "white" stroke-width = "3"/>
</svg>
</div>
</body>
</html>Здравствуйте, когда объект SVG переходит в режим мобильного просмотра, SVG искажается, и между полукругом и линией возникает разрыв. Почему это вызвано и как мы можем это решить.
на рабочем столе:
по эмуляции мобильного телефона:
Ожидаемый результат:
Я ожидал, что на мобильном телефоне он будет выглядеть так же, как на настольном компьютере.
Нет, особой причины не было, @Dai
У вашего line есть height: 0.25vh, а у вашего SVG есть stroke-width = "3" - поэтому, конечно, они будут разными... (и vh не следует использовать для определения тонкой линии...)
вам нужно изменить единицу измерения SVG, а также настроить размер и окно просмотра.
У вас есть width = "10vw" height = "5vh" и viewBox = "0 0 100 50". Размер SVG зависит от размера окна и не соответствует соотношению сторон, определенному viewBox. Другое окно, другой ракурс. Одним из возможных решений было бы удаление высоты.
Ответы 3
Не используйте vh на мобильных устройствах.
100vh на мобильных устройствах содержит высоту панели навигации браузера, элементы, использующие vh для определения высоты, могут иметь другой вид, чем на настольном компьютере.
По умолчанию SVG пытается подогнать и выровнять линии по центру заданного viewBox (или окна просмотра). Вы можете контролировать это поведение с помощью атрибута saveAspectRatio элемента <svg>.
В приведенном ниже примере я использовал значение xMidYmin meet, которое переводится как:
- Выровняйте среднюю точку оси X пути по средней точке окна просмотра.
- Выровняйте среднюю точку оси Y пути по самой верхней точке окна просмотра.
- Сохраните соотношение сторон и убедитесь, что в поле просмотра все видно. (аналогично тому, как работает
background-size: contain.
body {
margin: 0vh 0vw;
}
.header {
position: relative;
width: 100%;
height: 12vh;
background-color: #004d40;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
top: 0;
}
.line {
position: absolute;
left: 0;
top: calc(50%);
width: 100%;
height: 0.25vh;
background-color: white;
z-index: 1;
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0%);
z-index: 2;
}<!DOCTYPE html>
<html lang = "tr">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>SVG Header with Half Circle</title>
</head>
<body>
<div class = "header">
<div class = "line"></div>
<svg width = "10vw" height = "5vh" viewBox = "0 0 100 50" preserveAspectRatio = "xMidYMin meet" xmlns = "http://www.w3.org/2000/svg">
<path d = "M0,0 A50,50 0 0,0 100,0" fill = "#004d40" stroke = "white" stroke-width = "3"/>
</svg>
</div>
</body>
</html>SVG, который был слегка урезан, похоже, также нуждается в модификации.
Вы должны быть осторожны при использовании устройства.
И пожалуйста, проверьте это. Это будет полезно. Как использовать атрибут <svg> viewBox?
body {
/* margin: 0vh 0vw; No need unit for zero */
margin: 0;
}
.header {
position: relative;
width: 100%;
height: 80px;
background-color: #004d40;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
top: 0;
}
.line {
position: absolute;
left: 0;
/* top: calc(50%); No need calc */
top: 50%;
width: 100%;
/* height: 0.25vh; If you use viewport height, The height of the device changes the thickness of the intended line */
height: 1px;
background-color: white;
z-index: 1;
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0%);
z-index: 2;
}<!DOCTYPE html>
<html lang = "tr">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>SVG Header with Half Circle</title>
</head>
<body>
<div class = "header">
<div class = "line"></div>
<svg width = "100" height = "50" viewBox = "0 0 100 100" preserveAspectRatio = "xMidYMin meet" xmlns = "http://www.w3.org/2000/svg">
<path d = "M0,0 A50,50 0 0,0 100,0" fill = "#004d40" stroke = "white" stroke-width = "3"/>
</svg>
</div>
</body>
</html>
transform: translate(-50%, 0%);— довольно неоптимальный подход, но, к счастью, в нем больше нет необходимости центрировать элементы. Есть ли причина, по которой вы не используете вместо этогоflexилиgrid?