首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

动态添加的SVG元素即使使用createElementNS也不会出现

的原因是因为createElementNS方法只能创建元素节点,而不能创建属性节点。在SVG中,元素节点和属性节点是紧密相关的,属性节点用于定义元素的属性和样式。因此,如果只使用createElementNS方法创建元素节点,而没有相应的属性节点来定义元素的属性和样式,那么添加的SVG元素将无法显示。

为了解决这个问题,我们可以使用createElementNS方法创建元素节点,并使用setAttributeNS方法为元素节点添加属性节点。setAttributeNS方法可以设置元素节点的属性和样式,使其能够正确显示在SVG中。

以下是一个示例代码,演示了如何使用createElementNS和setAttributeNS方法动态添加SVG元素:

代码语言:txt
复制
// 创建SVG命名空间
var svgns = "http://www.w3.org/2000/svg";

// 创建SVG元素节点
var svg = document.createElementNS(svgns, "svg");

// 设置SVG元素的属性
svg.setAttributeNS(null, "width", "200");
svg.setAttributeNS(null, "height", "200");

// 创建SVG矩形元素节点
var rect = document.createElementNS(svgns, "rect");

// 设置矩形元素的属性
rect.setAttributeNS(null, "x", "50");
rect.setAttributeNS(null, "y", "50");
rect.setAttributeNS(null, "width", "100");
rect.setAttributeNS(null, "height", "100");
rect.setAttributeNS(null, "fill", "red");

// 将矩形元素添加到SVG元素中
svg.appendChild(rect);

// 将SVG元素添加到文档中
document.body.appendChild(svg);

在上述代码中,我们首先使用createElementNS方法创建了一个SVG元素节点,并使用setAttributeNS方法为该元素节点设置了宽度和高度属性。然后,我们使用createElementNS方法创建了一个矩形元素节点,并使用setAttributeNS方法为该矩形元素节点设置了位置、大小和填充颜色等属性。最后,我们将矩形元素节点添加到SVG元素节点中,并将SVG元素节点添加到文档中。

通过以上的操作,我们可以动态添加SVG元素,并正确显示在SVG中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTML5(八)——SVG 之 path 详解

1.3、js 操作path 我们经常使用js动态添加、移除元素等,可以实现更炫酷特效,那js能动态操作path吗?如何操作呢? 我们使用js动态绘制一个与上边案例eg1一样path。...createElementNS介绍 createElementNS 是创建一个具有指定命名空间URI和限定名称元素。...使用语法:document.createElementNS(namespaceURI, qualifiedName[, options]); namespaceURI 指定与元素相关联命名空间URI字符串...为了向后兼容自定义元素规范早期版本,一些浏览器允许您在此使用字符串替代对象,其中字符串值是自定义元素标签名称。...val) / getAttribute(x) eg3:图表中饼图是特别常见,我们就先使用 js 动态地绘制一个扇形圆弧。

2.7K50

HTML5(八)——SVG 之 path 详解

1.3、js 操作path 我们经常使用js动态添加、移除元素等,可以实现更炫酷特效,那js能动态操作path吗?如何操作呢? 我们使用js动态绘制一个与上边案例eg1一样path。...createElementNS介绍 createElementNS 是创建一个具有指定命名空间URI和限定名称元素。...使用语法:document.createElementNS(namespaceURI, qualifiedName[, options]); namespaceURI 指定与元素相关联命名空间URI字符串...为了向后兼容自定义元素规范早期版本,一些浏览器允许您在此使用字符串替代对象,其中字符串值是自定义元素标签名称。...val) / getAttribute(x) eg3:图表中饼图是特别常见,我们就先使用 js 动态地绘制一个扇形圆弧。

2.4K50

HTML5(八)——SVG 之 path 详解

1.3、js 操作path 我们经常使用js动态添加、移除元素等,可以实现更炫酷特效,那js能动态操作path吗?如何操作呢? 我们使用js动态绘制一个与上边案例eg1一样path。...createElementNS介绍 createElementNS 是创建一个具有指定命名空间URI和限定名称元素。...使用语法:document.createElementNS(namespaceURI, qualifiedName[, options]); namespaceURI 指定与元素相关联命名空间URI字符串...为了向后兼容自定义元素规范早期版本,一些浏览器允许您在此使用字符串替代对象,其中字符串值是自定义元素标签名称。...val) / getAttribute(x) eg3:图表中饼图是特别常见,我们就先使用 js 动态地绘制一个扇形圆弧。

2.2K20

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:svg"); // 创建在svgns命名空间里svg元素 // 设置节点属性 chart.setAttribute...使其作为body元素子节点 var e = document.createElementNS("p","edition"); var body = document.getElementsByTagName..." fill="#c9d6d5" stroke-width="1"> 接着重复计算,应该是使用js,将其封装为一个函数,输入圆心坐标,传入数组即可

2.6K20

国庆节前端技术栈充实计划(2):抽空打好JavaScript基础

另外你可以使用事件监听器来监听比如 window onload 事件,把你代码添加到那个事件监听器里将会延迟你代码运行直到你页面的整个内容都加载完毕。..., 50, 50); 然后把这个 canvas元素插入页面,然后就会起作用了 document.body.appendChild(canvas); 使用 SVG SVG是为了创建可变基于矢量图像,并且可以在...首先创建一个大小确定SVG元素容器: var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.width...= 500; svg.height = 50; 然后创建一个 text元素带有期望位置和字体特征: var text = document.createElementNS('http://www.w3...; 最后把这个 text元素添加到我们 svg容器中,然后把 svg容器添加到HTML文档中: svg.appendChild(text); document.body.appendChild(svg

1.3K30

卧槽!这个老外竟然开发了一个汉字笔画库

开放源代码: 全面免费,可自由使用和扩展,鼓励社区参与和贡献。 易用性: 提供简洁JSON格式数据,易于集成到各类开发环境中。 跨平台兼容: 数据基于SVG标准,能在多种设备和浏览器上无缝运行。..., 所以添加不会使网页体积增大。..."> 可以通过npm 加载 Hanzi Writer npm install hanzi-writer 以vue3为例在项目中引入使用 html <div class="text-card...Something went wrong :("); }, }) 偏旁部首上设置不同颜色 Hanzi Writer 支持给汉字偏旁部首上设置不同颜色 var writer...使用原始字符数据实现汉字,描边扇形可视化 function renderFanningStrokes(target, strokes) { var svg = document.createElementNS

33610

三种图表技术SVG、Canvas、WebGL 3D比较

1.什么是SVG? 描述: 一种使用XML描述2D图形语言 SVG基于XML意味着,SVG DOM中每个元素都是可用,可以为某个元素附加Javascript事件处理器。...3.有了Canvas为什么还要使用SVG 最重要一点是SVG不依赖于终端设备像素,可以随意放大缩小但是不会失真 继续:为什么SVG放大不会失真而Canvas却会变模糊呢?...理解适用场景: 从以下这张微软开发社区公布性能图中可以看出,SVG在绘图面积较大,数据量较小时候性能较好,渲染时间较短,而Canvas刚好相反。 ?...5.总结 Canvas和SVG两者适用场景不同,开发者在使用是应根据具体项目需求来选择相应渲染方式。 最后附上一个SVG编译器帮大家更好理解和使用SVG <!...= document.createElementNS(SVG_NS, 'svg'); svg.setAttribute('width', '100%'); svg.setAttribute

3.4K30

可视化导学-图形基础

而且,浏览器更强大是,它还可以内嵌 SVG 标签,并且像操作普通 HTML 元素一样,利用 DOM API 操作 SVG 元素。甚至,CSS 可以作用于内嵌 SVG 元素。...,不过通过数学计算可以通过定位方式来获取局部图形 Canvas 和 SVG 使用不是非此即彼,可以结合使用。...这样做缺点是,在一些动态场景中,也就是需要频繁地增加、删除图形元素场景中,SVG 与一般 HTML 元素一样会带来 DOM 操作开销,所以 SVG 渲染性能相对比较低。...因为 SVG 一个图形对应一个元素,所以我们可以像处理 DOM 元素一样,很容易地给 SVG 图形元素添加对应鼠标事件。这可以让图形用户交互非常简单。...所以,即使是在用 Canvas 和 WebGL 渲染应用场景中,依然可能会用到 SVG,将它作为一些局部图形使用,这也会给应用实现带来方便。

1.1K90

探索如何将html和svg导出为图片

: 那么当svg存在于文档树中时是没有问题,但是导出时使用svg字符串,是脱离于文档,所以没有这个样式覆盖,那么显示自然会出现问题,知道了原因,解决方法有两种,一是遍历所有嵌入html节点,...手动添加内联样式,注意一定要给所有的html节点都添加,只给svg、foreignObject或最外层html节点添加都是不行;第二种是直接在foreignObject标签里添加一个style标签,...在chrome浏览器和opera浏览器上渲染非常正常,但是在firefox浏览器上foreignObject标签内容完全渲染不出来: 检查元素看不出有任何问题,并且神奇是只要在控制台元素里编辑一下嵌入...和opera上都是正常,这一次就想会不会是svgjs库问题,于是就去搜它issue,没想到,还真的搜出来了issue,大意就是因为通过SVG方法转换dom节点是在svg命名空间下,也就是使用document.createElementNS...foreignObject标签svg使用dom-to-image转换,它会再次把传给它svg添加到一个foreignObject标签中,这不是套娃吗,既然dom-to-image-more能通过foreignObject

56921

React源码解析之HostComponent更新(下)

node.size = props.size; } } } } //svg/math 元素创建是需要指定命名空间 URI else { //...创建一个具有指定命名空间URI和限定名称元素 //https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElementNS...SVG/MathML的话,则执行createElementNS(),创建一个具有指定命名空间URI和限定名称元素, 请参考: https://developer.mozilla.org/zh-CN/...② 如果需要更新props里有is属性的话,那么创建该元素时,则为它添加「is」attribute, 也就是自定义元素, 请参考: https://developer.mozilla.org/zh-CN.../docs/Web/HTML/Global_attributes/is ③ 除了上面两种情况外,则使用Document.createElement()创建元素 还有对标签bug修复,了解下就好

2.7K10

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

前端开发人员在构建网站时需要做出决定之一就是添加图片技术。它可以是HTML ,可以是通过CSS背景生成图片,可以是SVG 。...你注意到了吗,右边图片即使还没有加载会保留其空间吗?这是因为宽度和高度已经设置好了。它有明显区别! Demo 1.2 用CSS隐藏图片 可以用CSS隐藏图片,但是它仍然会被加载到页面中。...因此,在执行此操作时请小心,如果一个图片应该被隐藏,那么它可能是出于装饰目的。 img { display: none; } 同样,以上内容不会阻止浏览器加载图片,即使该图片在视觉上是隐藏。...您必须先检查元素,然后在DevTools中 url 中打开链接,然后才能下载随CSS添加图像。 2.6 伪元素 可以使用元素与CSS背景图片一起使用,例如,在图片顶部显示一个叠加元素。...HTML 会更安全,因为它可以打印而不会出现任何问题。

5.6K20

前端运用图片技巧总结

虽然这对有些人来说可能看起来有点老套,但还是很有用。让我们来直观地理解一下这个概念。 你注意到了吗,右边图片即使还没有加载,会保留空间吗?这是因为宽度和高度已经设置好了。它有明显区别!...伪元素 可以使用元素与CSS背景图片一起使用,例如,在图片顶部显示一个叠加元素。对于 ,除非我们为覆盖层添加一个单独元素,否则无法做到这一点。...解决方案1 经验分享 只有在图像不重要情况下,才是好解决方案 当图片不会被后台CMS动态更改时。...使用HTML 与 使用方法 现在问题是,要添加一个内边框,我们不能使用内嵌框阴影,因为它在图片上不起作用。解决办法是将头像包裹在 中,并为内边框添加一个专用元素。...避免使用图片作为CSS背景 当一个图片作为CSS背景被包含时,它将不会被打印出来,而是会出现一个空位。见下图。 就是这样情况。

2.6K20

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

虽然这对有些人来说可能看起来有点老套,但还是很有用。让我们来直观地理解一下这个概念。 你注意到了吗,右边图片即使还没有加载,会保留空间吗?这是因为宽度和高度已经设置好了。它有明显区别!...伪元素 可以使用元素与CSS背景图片一起使用,例如,在图片顶部显示一个叠加元素。对于 ,除非我们为覆盖层添加一个单独元素,否则无法做到这一点。...解决方案1 经验分享 只有在图像不重要情况下,才是好解决方案 当图片不会被后台CMS动态更改时。...使用HTML 与 使用方法 现在问题是,要添加一个内边框,我们不能使用内嵌框阴影,因为它在图片上不起作用。解决办法是将头像包裹在 中,并为内边框添加一个专用元素。...避免使用图片作为CSS背景 当一个图片作为CSS背景被包含时,它将不会被打印出来,而是会出现一个空位。见下图。 就是这样情况。

2.9K30

分享前端开发常用代码片段

作者:WEBING segmentfault.com/a/1190000014700549 一、预加载图像 如果你网页中需要使用大量初始不可见(例如,悬停)图像,那么可以预加载这些图像。 ?...你可以使用 ID 或 CLASS 替换 标签来检查某个特定图像是否被加载。 三、自动修复破坏图像 逐个替换已经破坏图像链接是非常痛苦。不过,下面这段简单代码可以帮助你。 ?...四、悬停切换 当用户鼠标悬停在可点击元素上时,可添加类到元素中,反之则移除类。 ? 只需要添加必要 CSS 即可。更简单方法是使用 toggleClass() 方法。 ?...document.createElementNS(SVG_NS,'svg').createSVGRect; } console.log(isSupportSVG()); 十二、检测浏览器是否支持canvas...还有一种方法是在(前缀$)变量中高速缓存元素 ? 链式和高速缓存方法都是 jQuery 中可以让代码变得更短和更快最佳做法。

1.1K51

小智在这3年开发中遇到 CSS 问题及解决方案,有大佬帮他总结好了 !

当 Flex 项目的数量是动态时,不要使用justify-content: space-between 当将justify-content: space-between应用于flex容器时,它将分配元素并在元素之间留出相等空间...向 SVG 添加 fill 有时,在使用 SVG 时,如果在 SVG 中以内联方式添加了fill属性,填充就不会像预期那样工作。...要解决这个问题,可以从SVG本身删除fill属性,可以覆盖fill: color。...使用元素 我经常使用元素,它们为我们提供了一种创建伪造元素方法,主要用于装饰目的,而无需将其添加到HTML中。...水平滚动条 由于元素宽度,有些元素会导致出现水平滚动条。 找到这个问题原因最简单方法就是使用 CSS outline。

3.7K10
领券