将 SVG 对象置于响应式 canvas 的中心

Question

SVG canvas 配置为适应浏览器 window 并始终在水平和垂直方向填充 100%。我希望蓝色立方体始终位于 window 的 底部中心 并保持相同的大小。

有什么方法可以改变立方体或 viewBox 的位置，使立方体始终位于底部中心，无论浏览器 window 的大小如何？

预先感谢您的帮助。

<!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 的大小 canvas.Alternatively 你可以使用 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"、
将视图框原点移动到中心并从那里开始绘制所有元素，同时考虑到由 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 属性值的支持程度如何，所以您可能想测试一下。

将 SVG 对象置于响应式 canvas 的中心

Center SVG Object on responsive canvas

svg

viewport

responsive