开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 添加svg不会显示

在JavaScript中添加SVG元素但它们没有显示出来，可能是由于多种原因造成的。以下是一些基础概念、可能的原因以及解决方案：

基础概念

SVG（Scalable Vector Graphics）是一种基于XML的图像格式，用于描述二维矢量图形。在网页中，SVG可以通过<svg>标签直接嵌入HTML，也可以通过JavaScript动态创建并插入到DOM中。

可能的原因及解决方案

元素未正确插入DOM
- 原因：可能是因为JavaScript代码没有正确地将SVG元素添加到文档对象模型（DOM）中。
- 解决方案：确保使用appendChild或insertBefore等方法将SVG元素添加到一个已存在的父元素中。
- 解决方案：确保使用appendChild或insertBefore等方法将SVG元素添加到一个已存在的父元素中。

命名空间问题
- 原因：SVG元素需要在正确的命名空间中创建，否则浏览器可能无法识别它们。
- 解决方案：使用createElementNS方法并指定SVG的命名空间URI。
样式问题
- 原因：可能存在CSS样式阻止了SVG元素的显示，例如display: none或visibility: hidden。
- 解决方案：检查相关元素的CSS样式，并确保它们没有隐藏SVG元素。
尺寸问题
- 原因：如果SVG元素的宽度和高度设置为0或者非常小，它可能不会显示。
- 解决方案：确保SVG元素及其子元素有适当的尺寸。
JavaScript错误
- 原因：如果在添加SVG元素的JavaScript代码中存在错误，可能会导致脚本停止执行。
- 解决方案：检查浏览器的开发者工具控制台是否有任何错误信息，并修复这些错误。

应用场景

SVG广泛应用于网页图形设计，如徽标、图标、图表和复杂的用户界面元素。它们在需要高分辨率显示和缩放的场景中特别有用，因为SVG图形是矢量的，可以无损地缩放到任何大小。

示例代码

以下是一个完整的HTML页面示例，展示了如何使用JavaScript动态添加SVG元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Example</title>
</head>
<body>
<script>
// 创建SVG元素
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('width', '100');
svg.setAttribute('height', '100');

// 创建一个圆形
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
circle.setAttribute('stroke', 'black');
circle.setAttribute('stroke-width', '3');
circle.setAttribute('fill', 'red');

// 将圆形添加到SVG中
svg.appendChild(circle);

// 将SVG添加到body中
document.body.appendChild(svg);
</script>
</body>
</html>

确保在实际应用中检查所有可能的问题点，并使用开发者工具来调试和验证SVG元素的正确插入和显示。

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

有帮助

没帮助

相关·内容

SVG绘图-SVG.js

前言本文是在SVG.js 3.0的前提上，和2.x的API不一致。...引用 svg.js@3.0/dist/svg.min.js"> 或者 import...{ SVG } from '@svgdotjs/svg.js' 简单示例 <!...var group = draw.group() group.path('M10,20L30,40') SVG.Symbol Symbol相当于模板，模板中能够添加多个元素。...嵌入在defs或symbol元素中的图形是不会被直接显示的，除非你使用元素来引用它。

6.3K7 1

本文说如何显示SVG

这些图片在http://www.zcool.com.cn/，不知道是不是不能直接用我们需要一个看起来不会模糊，因为矢量图，所以我们就使用svg，其实png也是，但是他播放模糊。 lindexi svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> svg...> 我们开始使用Image，但是没有显示于是网上有一个库Mntone.SvgForXaml，https://github.com/mntone/SvgForXaml，我们用Nuget ?...DOCTYPE svg PUBLIC ""-//W3C//DTD SVG 1.1//EN"" ""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"">...(file); 原文：因为他会占用内存，我们需要手动把它释放我们写在我们页面关掉，其实这个并不是关掉，只是我们的页面不显示 protected override void OnNavigatingFrom

1.1K2 0

iconfont 批量添加和svg下载

批量添加控制台执行以下操作 // 阿里妈妈选择全部图标 var icons = document.querySelectorAll('.icon-gouwuche1'); // 使用 setTimeout...) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 17); } }; auto_click(0); 或者添加添加一个浏览器插件

660 0

Hexo 中 MathJax 的静态显示（svg）

本文尝试利用 gulp 和 gulp-mathjax-page 将公式直接渲染为 SVG 并嵌入 HTML，以实现静态化，支持任何 Hexo 主题。同时，支持化学方程式?。...当然，如果你发现显示的样式有问题，可以参考我下文给出的 CSS 样式，自行加上。...gulp-mathjax-page 2）新建 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // 文件位置：~/blog/gulpfile.js...效果展示注意：我已从 Hexo 迁移到 Hugo，下面的公式是由 ${\KaTeX}$ 在线渲染的，而非 SVG。...} He & -> ^{4} He + ^{1} H + ^{1} H } \end{aligned} \end{cases} $$ 第一个反应是一个弱相互作用，反应概率很低的一个过程，这就是现在太阳不会爆炸而是缓慢

2.1K2 0

win10 uwp 显示SVG win2d 使用 svg

本文说如何显示SVG 本来在我一个白天晚上按钮，使用图片，图片不清晰 ?...这些图片在http://www.zcool.com.cn/下载，不知道是不是不能直接用我们需要一个看起来不会模糊的图，一般都是选矢量图。...> 我们开始使用Image，但是没有显示于是网上有一个库Mntone.SvgForXaml，https://github.com/mntone/SvgForXaml，我们用Nuget ?.../xx.svg")); 然后开始创建 CanvasSvgDocument ，这个类可以用来显示 svg ，但是他有静态方法创建 using (var stream = await file.OpenReadAsync...()) { svgDocument = await CanvasSvgDocument.LoadAsync(sender, stream); } 然后可以显示处理或者修改svg图片，下面的代码写在

1.3K1 0

JS控制SVG缩放+鼠标控制事件

DOCTYPE html> js控制SVG缩放 ... svg id="svg" style="background-color: #FAFAFA;"> <...= 400; var gridLength = 20; // 定义网格的大小 svg.setAttribute('width', width); svg.setAttribute...; svgBackground.appendChild(line2) } } /* * js...创建svg元素 * @param {String} tag svg的标签名 * @param {Object} svg元素的属性 */

24.5K5 0

Power BI Synoptic Panel SVG地图添加悬停动画

上文《Power BI 鼠标悬停突出地图区域》介绍了鼠标悬停静态突出，本文更进一步，添加悬停动画。...以下是Power BI Synoptic Panel（由SQLBI团队提供的SVG视觉对象）显示的虚拟着色地图，鼠标选择某一区域，添加了填充色闪烁效果：下图是边框闪烁：下图是边框旋转： Synoptic...Panel本身并不具有动画设置选项，此处对SVG地图文件进行了略微修改。...记事本打开你下载好的地图文件，在地图的开始处添加以下动画代码：保存后重新在Synoptic Panel导入地图，鼠标悬停填充色动画即生效。边框色动画只需要把以上代码中的fill替换为stroke。...这个原理除了用在Synoptic Panel着色地图，使用DAX+SVG结合制作的流向地图、气泡地图等都可以使用。

1051 0

html js 数组添加,js数组添加数据

我们在学习python的过程中，会对列表、字符串添加数据。在Javascript中，我们也会对数组添加数据。在不同的位置添加数据有着不同的方法。...本文介绍js数组添加数据的三种方法：1、结尾添加push()方法；2、头部添加unshift() 方法；3、向/从数组指定位置添加/删除项目，然后返回被删除的项目splice() 方法。...可添加多个元素。 3、返回值把指定的值添加到数组后的新长度。...整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 b：必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1,…..,itemX：可选。向数组添加的新项目。...个索引为1的值，在索引为1的值前插入tony alert(arr.splice(1,0,’tony’)) //返回值为空 alert(arr) // smile,tony,2,3,marie 以上就是js

26.2K1 0

How to load SVG file into SVGRenderer in three.js

原文： https://stackoverflow.com/questions/33140342/how-to-load-svg-file-into-svgrenderer-in-three-js...I'm trying to use SVGRenderer in three.js (http://threejs.org/examples/#svg_sandbox)....The example shows you how to make an SVG element (a circle) on the fly....The createElementNS command doesn't seem to support importing SVG files?...I essentially want my image.svg to be displayed on a three.js scene.

5.6K3 0

WordPress添加FPS帧率显示

前言：如果经常打游戏的话，对于FPS帧率波动变化是非常在意的一件事，在游戏的世界里帧率越低就越容易卡段，其实我们也可以尝试让自己的网站显示FPS帧率，教程也是很简单，只需一段js代码即可实现我们的这个需求...今天就给朋友们分享一下如何在WordPress添加帧率显示的教程，请继续往下看！...使用教程：你只需在网站管理后台—》主题设置—》自定义代码—》自定义javascript代码，把下面的js代码复制粘贴到里面即可。

5495 0

WordPress添加FPS帧率显示

WordPress添加FPS帧率显示 ---- 前言我们经常打游戏时非常的关注游戏里的帧率的变化，游戏帧越低就越容易卡段，那么我们是否也可以给网站弄个FPS帧率显示呢？...其实非常的简单，只需一句js代码即可实现！今天就给大家分享一下WordPress添加帧率显示的教程，请往下看！...使用教程你只需在网站管理后台—》主题设置—》自定义代码—》自定义javascript代码，把下面的js代码复制粘贴到里面即可。

5253 0

JS显示当前时间

window.setInterval('showRealTime(clock)', 1000); function...

27.7K3 0

如何使用JavaScript向现有SVG中添加元素？

动态向SVG中添加元素的实际应用场景假设我们正在开发一个数据可视化的应用程序，其中的图表是用SVG绘制的。现在我们需要根据用户的操作动态地在现有的SVG图表中添加新的数据点或者线段。...设置属性：新创建的SVG元素需要设置一些属性，比如路径、颜色、线宽等。将新元素添加到SVG中：最后一步就是将新创建的SVG元素添加到我们选中的SVG元素中，使其显示在页面上。...代码示例假设我们有以下的HTML结构： svg width="100" height="100">svg> 我们希望在这个空的SVG中动态添加一条直线。...SVG中 svg.appendChild(newLine); 这段代码会在页面上显示一条从(10,10)到(90,90)的蓝色线条。...appendChild将其添加到SVG中。

1731 0

js动态添加div

问题有没有遇到过这样的需求, 在页面上会有不定个input, 点击添加按钮就添加 ?...把他封装起来, 需要的时候调用就好了思路因为每个input标签的name如果相同的话, 在后端接收的时候会出错, 所以我的解决办法就是在name后加上一个数字, 后端用一个循环进行接收点击第一行的添加...点击的时候, 将div准备好, 添加到内容div中的第一个点击每行的添加将div添加到当前点击行后面一个点击每行删除删除当前div 实现基本思路很简单, 只要在每个点击按钮上添加对应的点击事件...我在封装的时候喜欢先想用的时候怎么用, 然后根据这个思路来想应该怎么封装, 思考如下因为添加的div肯定是不同的, 是需要传的参数, 但是如果直接传div字符串也太丑了, 应该在页面直接写HTML,...attr('name'); $(this).attr('name', name + '_' + secp); }); var _this = this; // 给添加按钮添加点击事件

24.5K4 0

JS动态添加表单

–js实现添加一行内容!...–js实现删除一行内容!效果如下图所示–!...onclick=”submit”/> 原文：http://lizongwei.blog.163.com/ 下面部分是点击按钮显示隐藏内容

13.8K6 0

js添加遮罩层

"form1" runat="server"> 在一个层上添加一个遮罩层的实现...: 实现原理：就是在要添加遮罩层的层上里面添加一个层，让该层撑满整个层即可具体实现要求说明：在要添加遮罩层的位置必须是相对的位置...100%;top:0px;left:0px; 添加遮罩层..." /> js"> <script type...else { hasAdd = false; $("#divmask").remove("div"); $(this).val("添加遮罩层

11.9K1 0

JS 控制隐藏显示

比较简单的实现.style.display就是控制层隐藏或显示的属性....("div").style.display) } 显示...style="display: none" onMouseout="hidden();"> show it div的visibility可以控制div的显示和隐藏...，但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";...//隐藏 document.getElementById("typediv1").style.visibility="visible";//显示通过设置display属性可以使div隐藏后释放占用的页面空间

20.7K3 0

Wireshark添加注释并显示

一直没用过 wireshark 的注释功能，读卡的时候需要 wireshark 来帮忙解析一下 14443 的协议，所以想着边看边注释，结果加上注释不会在数据包那里显示出来，需要加一个列，分享一下添加过程...首先添加注释，直接在一条数据包右键，选择分组注释，Add New Comment 添加完以后在下面是可以看到的，但列表没有，没法对照着看，很不舒服接下来右键 wireshark 最上面那一行列标题...，选择列首选项添加一列，内容如下，点击 OK 即可最终效果如下

4913 1

网站添加显示IP信息图片

根据访客ip自动生成一张包含多种信息的图片，包含：地理位置、当前日期、ip地址、终端操作系统、浏览器版本。

1.9K4 0

【说站】css中svg图片无法显示怎么办？

css中svg图片无法显示怎么办？ 1、在保证svg图片可以打开且无损坏的前提下，使用ideal或任意文本编辑工具打开svg图片。...2、使用object对象显示。...mapinfoImg" οnclick="glass(event)" data="http://localhost:8080/mapinfo_chx2/featureDemoSVG" type="image/svg...+xml" width="1200" height="1200" id="mySVGObject"> 以上就是css中svg图片无法显示的处理办法，在做网页开发时，我们通过浏览器进行测试...，发现svg图片不能显示的这类情况，就可以采取本篇所讲的方法进行解决。

3.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭