开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用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）：提供安全可靠的对象存储服务，用于存储和管理大规模的非结构化数据。了解更多信息，请访问腾讯云对象存储。

相关搜索:Fancybox 3:将iFrame放置在视口的顶部？JS动态创建的SVG在IOS中不工作/动画使用'flex‘将按钮从'Form’放置在不同的div下使用sceneform将画廊中的位图放置在墙上使用Skele组件在React-Native的视区中播放视频使用自动布局将按钮放置在靠近中心的位置在Nest js中使用中间件时，如何将参数传递给中间件内部的use函数在OBJ (缓冲区几何体)的每个顶点(属性)上放置粒子的Three.js 在不使用js的情况下将文本适合svg 在使用JS和SVG动态添加和删除类时遇到问题

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

动手练一练，手写一个价格对比、固定表头滚动的表格

大家好，今天我们将一起实践下如何手写固定表头，那么什么是固定表头呢？就类似 Excel 表格有个锁定表头的功能，方便用户查阅数据进行数据项的对比。虽然有不少相关插件提供了类似的功能，比如 ScrollMagic.js，但是今天的实例，我们将用纯原生的方式进行实现，当滚动条滚动至表格位置，固定表头位置，表格内容查看完后，取消固定表头的功能。

03

【JQuery】扩展BootStrap入门——知识点讲解(一)

Bootstrap ，基于 HTML 、 CSS 、 JAVASCRIPT 的前端框架。

02

2019 年 11 个受欢迎的 JavaScript 动画库！

超过46K的star，这个流行的库提供了非常多的3D显示功能，以一种直观的方式使用 WebGL。这个库提供了canvas、 svg、CSS3D 和 WebGL渲染器，让我们在设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次推出，目前仍有近1000名贡献者在开发中。

02

不是吧？强大的 vite 居然不支持内 SVG 转 Base64 内嵌？

最近啊，西瓜哥我用 vite 去给一个项目构建（vite build）一个应用。打包结果是一个 html 和一些加了哈希的资源。

02

使用相交观察器和SQIP进行渐进式图像加载

前言在前面一文使用交叉点观察器延迟加载图像以提高性能中,已经知晓了使用该方式可以提高页面的访问速度,那在此基础上,我们还可以做得更好?,答案显而易见,如果你爬梯子访问过一些国外的图片类的网站,国内若

02

SVG学习笔记，持续记录。

SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape，例如：由直线和曲线组成的路径）、图像(image)、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换（nestedtransformations）、剪切路径（clippingpaths）、alpha蒙板（alphamasks）、滤镜效果（filtereffects）、模板对象（templateobjects）和其它扩展（extensibility）。

04

将 SVG 与媒体查询结合使用

在 HTML 文档中，我们可以根据视口的条件显示、隐藏或重新排列页面的某些部分。例如，如果浏览器窗口的宽度为 480 像素，我们可能会将导航从水平导航移动到垂直可折叠列表。将 SVG 与媒体查询一起使用时，我们可以做类似的事情。

00

11个最好的JavaScript动态效果库[每日前端夜话0x3E]

当我想要在网上找一个简洁的 Javascript 动效库时，总是发现很多“推荐”的库都是缺乏持续维护的。

03

【Web技术】610- Web上的图片技巧

前端开发者在构建网站时需要做的一个决定是添加图片的技术。它可以是一个HTML ，或者是通过CSS背景生成的图片，也可能是SVG <image>。选择正确的技术很重要，对网站的性能和可访问性起着巨大的作用。

03

基于Vue的前端架构，我做了这15点

为什么选择了两个？因为公司团队跟倾向于使用 scss 开发，less 是为了覆盖 ant design vue 的样式，stylus 只有我自己喜欢这种风格。

02

基于 Vue 的前端架构，我做了这 15 点

https://juejin.cn/post/6901466994478940168

04

前端运用图片的技巧总结

原文 | https://ishadeed.com/article/image-techniques/

02

【demo50】背景图点击切换

代码取自开源项目50projects50days，用作个人学习和巩固三件套的知识，增加了注释，可能会有小改动。

02

深挖 Threads App 帖子布局，我进一步加深了对CSS网格布局的理解

当我遇到一个新产品时，我首先想到的是他们如何实现CSS。当我遇到Meta的Threads时也不例外。我很快就探索了移动应用程序，并注意到我可以在网页上预览公共帖子。

02

手把手带你上手D3.js数据可视化系列（一）手把手带你上手D3.js数据可视化系列（一）

上一篇文章「安利一些不错的D3.js资源 - 牛衣古柳 2021.06.29」的反响还不错，记得有新群友说是主管推给她文章才加过来的，也是很神奇。

02

新手学习web前端的基础知识内容有哪些

前几年，很多人看到IT行业越来越火，就想转行成为程序员。那时候转行还是很简单的，不一定要掌握很多技术知识，如果你是前端人员，甚至会写个静态页面就可以去应聘了。但现在，这样的“好事”越来越不好找了，很多毕业生面临着一毕业就失业的情况。然而，市面上饱和的大多数是初级的职位，对于中高级开发工程师，企业还是很欢迎的。

03

Markdown 语法

Markdown提供了一个特殊符号 > 用于段首进行强调，被强调的文字部分将会高亮显示

03

【新版发布】EasyShu3.1版本发布，SVG地图可视化8图表可用，象形柱图信息图表吸睛之作。

https://www.yuque.com/easyshu/helpdocument/dzg5gz

02

手绘风格的 JS 图表库：Chart.xkcd

图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库：一个手绘风格的 JS 图表库 —— Chart.xkcd，快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果。

02

D3.js实战：数据可视化高级技巧实例应用

首先，我们需要一个HTML文件来引入D3.js库，并准备一个画布来放置我们的图表。

01

JavaScript 编程精解中文第三版十七、在画布上绘图

浏览器为我们提供了多种绘图方式。最简单的方式是用样式来规定普通 DOM 对象的位置和颜色。就像在上一章中那个游戏展示的，我们可以使用这种方式实现很多功能。我们可以为节点添加半透明的背景图片，来获得我们希望的节点外观。我们也可以使用transform样式来旋转或倾斜节点。

03

【D3.js - v5.x】（2）绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡

SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。

02

动手练一练，使用 React 和 Next.js 做一个简单的博客网站（上）

大家好，如果要做一个博客网站，你会选择什么前端技术呢？本篇文章，我将和大家一起使用 React 和 Next.js 技术从0到1创建一个博客网站，通过本案例，你将会学习到 Next.js 的以下内容：

05

30个你应该在2022年里使用的JavaScript 动画库

英文 | https://javascript.plainenglish.io/30-javascript-animation-libraries-for-2022-db33a472e02d

02

前端必备，响应式Web设计的9项基本原则

响应式web设计对于解决多类型屏幕问题来说是个不错方案，但从印刷的角度来看，其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸，没有任何物理限制，让人感到无从下手。随着建立网站可用的各种小工具越来越多，像素设计局限于桌面和移动端也已经成为历史。因此，现在就让我们来说明一下如何运用响应式web设计的各项基本原则来实现，而不是抗拒流畅的网页体验。为了简单起见，我们将着重讲布局（当然，响应式设计远远不止于此，如果你想进一步学习，可以搜索蚂蚁大喇叭学习）。

01

20个 CSS 快速提升技巧

css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。

02

Power BI 卡片图显示不同单位

如果数据差异非常大，有的上亿，有的只有几百，如何在卡片图更好的显示这样的数据？把数据修正同时带有单位是个不错的办法，比如如果数据超过一亿，除以一亿，末尾加个汉字”亿“。

02

前端动画大乱炖

作为一只前端狗，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新，如有不当还望多多指正。

02

【D3使用教程】(4) 添加数轴

D3的数轴实际商是由程序员自己来定义参数的函数。调用数轴函数，会生成数轴相关的可见元素，包括轴线、标签和刻度。

01

【今晚开奖】EasyShu3.1版本发布抽奖送订阅活动，接近100%中奖率

同时 EasyShu 分享乐园开放，使用 EasyShu 制作自己专属的图表、分享数据可视化见解等赢取订阅时长。

03

web 图像技术：前端引入图片的各种方式及其优缺点

前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是标签，或者是通过CSS background 属性，还可以使用 SVG <image>。选择正确的方式是很重要的，它对性能和可访问性有很大的影响。

02

如何提升你的CSS技能，掌握这20个css技巧即可[完整版]

随着前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写，在布局中标准化样式流程，不仅可以帮助你高效地创建自己的框架，而且可以解决许多常见的问题。

02

14.1K Star开源一款实用的微型在线绘图工具,简约而不简单

tldraw是一款开源的Web绘图工具，可以使用它创建并共享流程图、线框图、原型、图表和其他可视化内容。

01

【译】Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例

前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术。它可以是HTML ，也可以是通过CSS背景生成的图片，也可以是SVG <image>。选择正确的技术很重要，并且可以在性能和可访问性方面发挥巨大作用。

02

SVG绘制饼状图

SVG绘制饼状图昨天学习了基本的SVG，下面是使用SVG绘制饼状图创建SVG空间创建SVG 需要一个document.createElementNS()方法一个一个setAttribute()方法编写如下js，将会创建一个svg空间 // 创建一个XML命名空间 var svgns = "http://www.w3.org/2000/svg"; // 创建一个SVG元素指定大小和坐标 var chart = document.createElementNS(svgns, "svg:sv

02

一共56个，盘点最实用的大数据可视化分析工具

一、Excel Excel作为一个入门级工具，是快速分析数据的理想工具，也能创建供内部使用的数据图，但是Excel在颜色、线条和样式上课选择的范围有限，这也意味着用Excel很难制作出能符合专业出版物和网站需要的数据图。二、Google Chart API Google Chart提供了一种非常完美的方式来可视化数据，提供了大量现成的图标类型，从简单的线图表到复杂的分层树地图等。它还内置了动画和用户交互控制。三、D3 D3（Data Driven Documents）是支持SVG渲染的另一种Jav

07

【收藏】55 款可视化分析工具，优秀数据分析师必备！

俗话说的好：工欲善其事，必先利其器！一款好的工具可以让你事半功倍，尤其是在大数据时代，更需要强有力的工具通过使数据有意义的方式实现数据可视化，还有数据的可交互性；我们还需要跨学科的团队，而不是单个数据

05

D3 介绍

D3.js 是一个基于数据的操作文档的 JavaScript 库，可以让你绑定任何数据到 DOM，支持 DIV 这种图案生成，也支持 SVG 这种图案的生成（如果你对 SVG 不熟悉，请先看一下这篇文章，它介绍了 SVG、VML 和 Canvas）。D3 帮助你屏蔽了浏览器差异，做出来图案的效果可以说是炫目得一塌糊涂，可是代码却很简洁。在我第一次听人介绍 D3 的时候，确实被其示例震撼到了，大量的例子在这里可以找到。

02

动手练一练，做一个现代化、响应式的后台管理首页

📷 作为一个前端开发者，我们或多或少都会接触后台管理系统的制作，你是否会亲自动手做还是从网上找源码改一个呢？今天我们将从零开始纯手工制作一个后台管理面板的首页，通过这个案例的学习你将会学习到如何制作一个响应式后台管理页面的思路，本篇文章内容比较长，请大家多多包涵，希望你能看下去，😁😁😁。这篇文章的内容是基于我阅读国外一篇博文内容的整理，并非完全直接翻译，由于水平有限，难免有限疏漏，欢迎大家指正一、首先明确下界面需求 1、屏幕宽度 >767px 时，界面交互如下视频所示：界面的菜单可以通过点击左下角

00

动手练一练，做一个响应式的后台管理面板

作为一名前端开发者，我们或多或少都会接触后台管理系统的制作，你是否会亲自纯手工制作做还是从网上找源码改一个呢？今天我们将从零开始纯手工制作一个后台管理面板的首页，通过这个案例你将会学习到如何制作一个响

01

55 款必备可视化分析工具，让你工作事半功倍！

俗话说的好：工欲善其事，必先利其器！一款好的工具可以让你事半功倍，尤其是在大数据时代，更需要强有力的工具通过使数据有意义的方式实现数据可视化，还有数据的可交互性；我们还需要跨学科的团队，而不是单个数据

06

移动端H5开发之页面适配篇

最近开发并上线了一款H5项目，在这里想和大家分享一下关于项目中使用到的移动端适配技巧，如果对你们有所帮助的话，就多多点赞收藏😃各位看官老爷别着急，在讲页面适配之前，我们先来捋一捋viewport（视口）的概念~在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI，菜单栏等——即指你正在浏览的文档的那一部分。一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口1.1 布局视口图片在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，用户可以手动对网

09

Vite Plugin Just so so

大家好，我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder

01

手把手带你上手D3.js数据可视化系列（三）手把手带你上手D3.js数据可视化系列（三）

本系列 D3.js 数据可视化文章是古柳按照自己想写的逻辑来写的，可能和网上的教程都不太一样，至于会写多少篇、写成什么样，古柳也完全心里没数，虽然是奔着初学者也能轻松看懂的目标去的，但真的大家看完觉得有什么感受，古柳也不清楚，所以希望大家多多反馈，后续文章能改进的也继续改进，并且有机会的话基于这个系列再出个视频教程，但那是后话了。

02

知识图谱可视化前奏之d3.js

0.说在前面1.d3.js初识2.绘制完整的柱形图3.让图表动起来4.浅析Update、Enter、Exit5.交互式操作6.作者的话

04

[读书笔记]响应式web设计转

@media screen and (max-device-width:400px){

01

【工具】1923- 12个强大的 JavaScript 动画库，可帮助你提升用户体验

在项目开发中，我们可以通过创造有趣的动画来为我们的项目增加视觉感与用户体验，同时，也为我们的网站增添了独特的美感，而且还提高了用户参与度并创造了令人难忘的第一印象。

01

EasyShu3.51Beata测试版发布，新增相关系数热力图和小提琴图两大刚需统计图表

数据分析统计类刚需图表，满足学术群体的作图需求，亦是普通商业用户的统计学知识累积后的数据分析晋级之选。

04

SVG精髓阅读笔记

SVG,是一种可缩放矢量图形,一种XML应用.可以以一种简洁,可移植的形式表示图形信息.

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭