Question

SVG画布被配置为适应浏览器窗口，并始终水平和垂直填充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" 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>

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

Answer 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属性值，因此您可能需要对其进行测试。

将SVG对象置于响应画布上

2 个答案: