可以通过以下步骤实现:
<svg id="my-svg" width="400" height="300"></svg>
const svg = document.getElementById('my-svg');
const centerX = svg.clientWidth / 2;
const centerY = svg.clientHeight / 2;
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', centerX);
circle.setAttribute('cy', centerY);
circle.setAttribute('r', '50');
circle.setAttribute('fill', 'red');
svg.appendChild(circle);
完整的代码示例:
<!DOCTYPE html>
<html>
<head>
<title>SVG动态放置在视区的中间</title>
</head>
<body>
<svg id="my-svg" width="400" height="300"></svg>
<script>
const svg = document.getElementById('my-svg');
const centerX = svg.clientWidth / 2;
const centerY = svg.clientHeight / 2;
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', centerX);
circle.setAttribute('cy', centerY);
circle.setAttribute('r', '50');
circle.setAttribute('fill', 'red');
svg.appendChild(circle);
</script>
</body>
</html>
这样,使用JS将SVG动态放置在视区的中间就完成了。这个方法适用于任何需要将SVG元素放置在视区中心的场景,例如创建动态图表、动画效果等。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云