Хобрук: Ваш путь к мастерству в программировании

Центрировать объект SVG на адаптивном холсте

Холст SVG настроен так, чтобы подстраиваться под окно браузера и всегда заполняться на 100 % по горизонтали и вертикали. Я хочу, чтобы синий куб всегда находился в нижней центральной части окна, а также оставался одного размера.

Есть ли способ изменить положение куба или окна просмотра, чтобы куб всегда оставался в центре внизу, независимо от размера окна браузера?

Спасибо заранее за вашу помощь.

<!DOCTYPE html>
<html>
<head>           
  <style type="text/css" media="screen">
    body { background:#eee; margin:0 }
    svg {display:block; position:absolute; width:100%; height:100%; background:#fff;}
  </style>
</head>
        
<body>
  <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <rect x="0" y="0" width="100%" height="100%" fill="lightgreen"/> <!--Background--> 
    <rect x="0" y="0" width="100" height="100" fill="blue"/> <!--Cube-->
  </svg>       
</body>
</html>

svg responsive viewport
18.12.2018

Ответы:


1

Я бы использовал javascript для этого. clientWidth и clientHeight дадут вам размер холста SVG. В качестве альтернативы вы можете использовать getBoundingClientRect()

let x,y;

function init(){
x = svg.clientWidth/2 - 50;
y = svg.clientHeight - 100;
therect.setAttributeNS(null,"x",x)
therect.setAttributeNS(null,"y",y)
}

setTimeout(function() {
		init();
		addEventListener('resize', init, false);
}, 15);
body { background:#eee; margin:0 }
svg {display:block; position:absolute; width:100%; height:100%; background:#fff;}
<svg id="svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <rect x="0" y="0" width="100%" height="100%" fill="lightgreen"/><!--Background--> 
    <rect id="therect" x="50%" y="100%" width="100" height="100" fill="blue"/><!--Cube-->
  </svg>

18.12.2018

2

Вы можете переместить начало окна просмотра в центр с помощью viewbox="-50 -50 100 100",
и оттуда нарисовать все элементы с учетом относительных значений, установленных окном просмотра:

<!DOCTYPE html>
<html>
<head>           
  <style type="text/css" media="screen">
    body { background:#eee; margin:0 }
    svg {display:block; position:absolute; width:100%; height:100%; background:#fff;}
  </style>
</head>
        
<body>
  <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 100 100" >
    <rect x="-50vw" y="-50vw" width="100vw" height="100vw" fill="lightgreen"/> <!--Background--> 
    <rect x="-25" y="0" width="50" height="50" fill="blue"/> <!--Cube-->
  </svg>       
</body>
</html>

PS: я не знаю, насколько хорошо vw единицы поддерживаются в качестве значений атрибутов svg, поэтому вы можете проверить это.

18.12.2018
Новые материалы
Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
Обзор: Машинное обучение: классификация
Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
Разработка расширений Qlik Sense с qExt
Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..