Центр SVG Объект на отзывчивом холсте - PullRequest
Новая
       29

Центр SVG Объект на отзывчивом холсте

0 голосов
/ 18 декабря 2018

Холст 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>

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

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

<!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, поэтому вы можете проверить это.

0 голосов
/ 18 декабря 2018

Я бы использовал для этого 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>
...