使用JS将SVG动态放置在视区的中间

可以通过以下步骤实现：

首先，需要在HTML文件中创建一个SVG元素，并设置其宽度和高度，以及视区的中心点坐标。

<svg id="my-svg" width="400" height="300"></svg>

在JS文件中，获取SVG元素的引用，并计算视区的中心点坐标。

const svg = document.getElementById('my-svg');
const centerX = svg.clientWidth / 2;
const centerY = svg.clientHeight / 2;

创建一个SVG图形元素，例如一个圆形，并设置其位置为视区的中心点坐标。

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元素中。

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）。

腾讯云云服务器（CVM）：提供高性能、可扩展的云服务器，可满足各种计算需求。了解更多信息，请访问腾讯云云服务器。
腾讯云对象存储（COS）：提供安全可靠的对象存储服务，用于存储和管理大规模的非结构化数据。了解更多信息，请访问腾讯云对象存储。

使用JS将SVG动态放置在视区的中间

、

我一直在尝试这里的代码：<svg version="1.2" viewBox="0 0 600 400> 这可以很好地工作，除了它不会将文本定位在视口<

浏览 11提问于2017-03-03得票数 0

回答已采纳

1回答

在加载SVG时启动新的中心平移缩放

要使用SvgPanZoom更改SVG的位置，必须使用但这会导致SvgPanZoom最初将SVG从中心移动到新位置，因为默认情况下，它会首先将SVG放在视口的中间。在SvgPanZoom放置SVG之前，有没有办法强制SVG加载到不同的中

浏览 5提问于2018-05-30得票数 0

1回答

将SVG的左右对齐以创建并排的图像

、、、、

我试着把tunnel1和tunnel2放在一起，这样它们就可以并排显示相同的图像，大小也是一样的。对初学者的问题很抱歉，谢谢。目前我有 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://

浏览 0提问于2015-01-13得票数 1

回答已采纳

1回答

jQuery UI在视口外部的位置不正确

、、

我在用户点击时动态创建图像，并将这些图像相对于另一个“主”图像进行定位。当我将图像添加到视区内的主图像时，一切正常，但是如果主图像以及由此产生的新图像的目标位置在视区之外，则位置设置不正确，而是有一些偏移。我使用jQuery UI的Position API来实现这一点，如下面的示例所示： "my&

浏览 0提问于2012-02-08得票数 0

回答已采纳

1回答

svg中的中心组元素

、

我正在尝试使用svg图形作为放大页面的过渡。这个html页面有一个将覆盖整个屏幕的SVG元素，其中有一个<g>元素，我希望它在其父svg元素的中间水平和垂直居中，因此在视口的中间。我尝试过使用CSS (绝对定位、translateX()等)，但都没有用。这有可能吗？这是一个。

浏览 2提问于2014-07-13得票数 11

1回答

SVG和Spritesheets

、、

我有一个复古风格的spritesheet，但是我想使用SVG来应用一些效果，比如阴影、轮廓和其他东西。不要质疑它。我知道canvas是另一种选择，但是对于这个项目，我更喜欢使用SVG。然而，一个主要的问题是:从spritesheet中提取单个精灵。此外，我使用了1x1像素的精灵，但通过隐藏的画布将精灵放大为6x6，因此我还使用了图像元素，而不是链接到页面外部的图像。是否可以选择要

浏览 0提问于2012-02-23得票数 2

回答已采纳

1回答

当元素不在视口中时，是否应将其删除？

、、、

当一个元素被转换出视区并且不再进入时，我是否应该使用jQuery (如果这样更快的话，也可以是纯JS )动态地移除它？这会提高内存使用率或性能吗？编辑:为了让它更清楚，这里有一个实用的解释：$("circle").each(function(i, el){}); 现在所有的圆都在视口之外(因为<em

浏览 0提问于2015-07-30得票数 1

2回答

按设计大小显示缩放的SVG

、、

我有一个适合其父<object>尺寸的SVG图像。通过更改图像的currentScale和currentTranslate属性来缩放图像。如何缩放要显示的图像的预期大小并使其在视口中居中？示例代码： <!attributes will crop the vie

浏览 2提问于2011-04-05得票数 0

回答已采纳

1回答

获取移动(iPhone) Safari中视口的当前位置

、、

我正在尝试将div放置在iphone视窗的中心。基本上，当你点击一个图像时，它会弹出在屏幕的中间，而不管你在点击之前已经滚动到页面的哪个位置。这并不像将其设置为position: fixed那么简单；因为这将导致原点位于页面的顶部，而不是视区的顶部。我也不能做一些事情，比如检测滚动事件和跟踪我当前滚动到的位置，因为我正在编写的Javascript只会被注入到页面中，并在弹出窗口被触

浏览 1提问于2010-02-13得票数 13

回答已采纳

1回答

svg.js将文本放置在路径中间

、、

我正在尝试使用svg.js来实现将文本定位在路径的中间。下面我可以通过svg来实现它。<svg width="140" height="140"> <path id="textPlot" d="M68,27 L 51 31 39 39 29 52 26 69 31xlink:href="#textPlot" startOffset

浏览 2提问于2018-11-28得票数 0

2回答

如何使平滑滚动将内容带到视口的中间而不是顶部？

、

我在一个单页网站()上工作，网站的不同部分滚动到导航中选定的视区中。当前，当选择导航中的链接时，相应的部分平滑滚动到视口的顶部，与浏览器的顶部摩擦。我正在尝试让它滚动到视口的中间，这样它就像导航栏一样垂直居中。有没有办法在jquery中启用它？请随意查看该站点上的js，我不知道发生了什么…… 非常感谢并致以最美

浏览 0提问于2012-02-19得票数 2

回答已采纳

2回答

基于2d瓦片的游戏设计，如何绘制带有视口的地图？

、

玩家将被绘制在屏幕的中间，因此我希望在每个方向上显示10个瓷砖(而不是整个地图)。那么，是否应该告诉视口绘制，并检查游戏中的每个对象，并绘制那些可见的对象？地图瓦片应该是受此影

浏览 1提问于2012-03-05得票数 2

回答已采纳

1回答

缩放随机三维模型以适应视口

如何缩放随机3d模型以适合opengl视口？我可以将模型居中放置在视口的中间。如何缩放它以使其适合视口。模型可以是飞机、圆锥体、3d对象或任何其他随机模型。感谢任何人的帮助。

浏览 0提问于2010-04-03得票数 2

回答已采纳

1回答

svg-pan-缩放平移/缩放到任何对象

、

我正在使用svg - svg zoom代码来制作某种类型的svg地图，现在是时候在单击事件时添加一个功能来平移和缩放到svg的艺术组件了。但是，我不确定如何使用panBy()函数来获得所需的svg艺术项目:我尝试在我希望平移到的组上使用getBBox()，并将其与panZoomInstance.getPan()和getSizes()信息一起<em

浏览 5提问于2018-08-26得票数 3

回答已采纳

2回答

网页模板，其中内容占据整个视图高度-端口if有1行减去页脚

、

我正在寻找一个基于CSS的网页模板，其中的主要内容div占据了查看端口的全部高度(减去页眉和页脚的高度)，而它的内容有几行。页脚应该在视口的底部，而不是内容的正下方，因为它更多地位于视口的中间。如果内容需要比视区更多的空间，那么页脚可以在网页的底部(而不是视区的底部)作为标准

浏览 2提问于2008-09-20得票数 6

回答已采纳

1回答

如何调整工作区高度以在Svg-edit中填满屏幕？

、、、、

是否可以将svg-edit的工作区高度设置为动态适应屏幕高度？现在可以在文件config.js中更改工作区域大小(例如640x480、800x600)。但是，如何更改此工作区以动态适应屏幕呢？有多少像素的工作区并不重要，但我需要缩放工作区，以适应屏幕。我想使编辑器窗口与工作区高度，以填补实际的浏览器屏幕(缩放禁用，工作区扩展到整

浏览 4提问于2015-04-29得票数 0

1回答