将 SVG 元素添加到 html 文件中?

2024-02-28

我想将一些 SVG 元素添加到 html 文件中。我发现链接说不支持此功能,文档类型必须是 xhtml。

但我正在使用一些带有 html 的 javascript 库,这些库允许我在其中使用 SVG(Raphael、SVG Web 等)。

那么有没有一种方法可以将脚本添加到html文件中,从而可以在运行时动态地将SVG元素添加到文档中呢?

Thanks


var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg');
var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "blue");

svgnode.appendChild(circle);
mydiv.appendChild(svgnode);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 SVG 元素添加到 html 文件中? 的相关文章

  • 禁用内容安全策略

    当我开发网站时 我经常想看看特定功能在网站上的外观如何 所以我会使用 chrome 开发者工具并经常运行一些 javascript 脚本 我经常发现一些脚本由于内容安全策略 CSP 而无法运行的问题 我完全理解该策略是为了防止跨站点脚本攻击
  • 如何通过单击图像预览上的“x”从文件输入中删除图像?

    我目前有一个文件输入 一旦用户上传图像 就会显示图像预览 在图像预览上 有一个 x 可以从列表中删除图像预览 单击此 x 后 有什么方法可以从输入中的文件集中删除图像吗
  • 如何更改传单中功能集的样式?

    我正在看等值区域的例子 https leafletjs com examples choropleth https leafletjs com examples choropleth 这是他们使用的数据源 type Feature prop
  • 访问sendBeacon发送的数据

    文档表明sendBeacon通过发送其数据HTTP POST request 但在 PHP 中 POST变量似乎是一个空数组 这是我的 JavaScript 代码 navigator sendBeacon beacon log php My
  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • Ember.js 处理 View 事件后转换到路由

    Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http
  • 在为 RXJS 可观察量编写测试时,如何避免让调度程序通过我的业务逻辑?

    我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt
  • javascript中按tab键时如何调用函数?

    我有一个这样的功能 function whenEmpty field if field value field style backgroundColor ffcccc alert Please fill the field field f
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • Nodejs mysql 获取正确的时间戳格式

    我在用着mysqljs https github com mysqljs mysql得到结果后sql我变得不同TimeStamp格式如下 created at Sat Jul 16 2016 23 52 54 GMT 0430 IRDT 但
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • 从 PHP exec() 函数读取 git Push 的输出

    我正在为我的框架的命令行工具编写部署命令 它使用git来部署 我有一行这样做 exec git push remote branch branch shell output status 我想要里面的推送输出 shell output 但它
  • 在VB6中,声明的字段有默认值吗?

    我正在查看一些旧的 VB6 代码 在多种形式中 我遇到了如下声明语句 PEC NUM ENT 1 As Byte EC MORE RW EXIST 0 As Byte EC CODE IND 0 As Byte EC DATA 7 As P
  • PHP - 数据库模式:版本控制、分支、迁移

    我正在尝试提出 或找到 一个可重用的系统 用于 php 项目中的数据库模式版本控制 有许多可用于 php 的 Rails 风格的迁移项目 http code google com p mysql php migrations http co
  • HTML5 音频的 ontimeupdate 在 Chrome 中未触发

    我有以下代码 用于创建 html5 音频元素并设置时间更新时的侦听器 音频在所有浏览器中都能正常播放 但 ontimeupdate 函数在 Chrome 中永远不会触发 包括 Android 上的 Chrome var audioEleme
  • 为什么在 Kotlin 中异步设置视图尺寸不起作用?

    这有效 myView layoutParams myView layoutParams apply height 100 但这都不是 使用 android ktx myView doOnLayout myView layoutParams
  • 无法在桌面应用程序背后的代码中绑定网格视图

    我有一个列出所有客户的网格视图 我将它绑定在放置在 MDI 子项中的 Form 的加载时间中 网格视图中的列是在设计时预定义的 我的代码Form Load 事件是 try cn db createConnection if cn State
  • ViewModel 没有零参数构造函数错误 - 即使它有零参数构造函数

    我是 Android 和 Java 新手 正在尝试制作一个基于位置的应用程序 EDIT 我做了一个非常非常简单的测试代码 但得到了同样的错误 这是java package com example viewmodeltest import a
  • 从电子邮件中的链接启动 iPhone 应用程序

    我一直在尝试 iPhone SDK 中的 URL 方案 并且我已经使用自定义 URL 方案 例如 myap Dosomething 来启动我的应用程序 但这对于我想要的东西来说并不实际 是否可以以某种方式注册一个方案 允许电子邮件中的链接
  • 与assert_select相反?

    我正在编写一个应用程序 需要检查视图是否存在not具有某些功能 特别是因为该功能必须仅呈现给特定安全组中的用户 我正在寻找与assert selects相反的内容 以便看到菜单是not呈现 看看这里的文档 http apidock com
  • java优先级队列与链表的比较

    我正在解决BFS问题 我使用了 PriorityQueue 但我得到了错误的答案 然后我使用了LinkedList 我猜对了并且 我无法找到它们之间的区别 这是两个代码 为什么两个答案不同 Code1 LinkedList q new Li
  • 如何创建一个 React Native ios 共享扩展应用程序

    我希望我的反应本机应用程序可以从 Whatsapp Skype 照片共享 我尝试使用反应本机共享扩展 https www npmjs com package react native share extension但它只在 Safari 浏
  • watchOS 2.2 应用程序如何确定其配对的 iPhone 是否已切换到另一台 Apple Watch?

    我正在尝试在我的 iOS 9 3 watchOS 2 2 应用程序中支持与多个手表配对的新功能 它似乎运行良好 只是我无法弄清楚 watchOS 应用程序如何确定配对的 iPhone 是否已切换到另一台 Apple Watch The do
  • 从 NSBundle 获取 nil 路径

    我在项目中创建了一个新文件夹 在其中复制了图像 称为 io jpg 我还检查了构建阶段 gt 复制捆绑资源 文件就在那里 所以我试图获取这张图片的路径 NSBundle bundle NSBundle mainBundle NSString
  • ActiveMQ如何处理关闭的会话

    我正在使用 ActiveMQ 将电子邮件消息排入队列 消费者读取队列并发送电子邮件 在启动时 我注册一个生产者并永久缓存它 PooledConnectionFactory factory new PooledConnectionFactor
  • 词法或处理器问题:未找到 boost/config/user.hpp' 文件

    当我在 Xcode 中运行 React Native 应用程序时 它显示错误 boost config user hpp 文件未找到 而且当我使用命令 react native run ios 运行应用程序时 我在终端中收到错误 Comma
  • gdax-java 作为库的实现

    我正在尝试实现这个API https github com robevansuk gdax java https github com robevansuk gdax java以便能够通过 Coinbase 创建订单 提取资金和存入资金并在
  • 在ANDROID中打开一个activity而不在manifest文件中声明它?

    我想打开一个活动而不在清单文件中声明它 我不知道这是否可能 我真正想要的是使用意图从我的程序中动态打开一个活动 如果可能的话 任何人都可以帮助我吗 不可能 虽然我不确定你的意思是 动态打开活动 See http developer andr
  • 覆盖 FOSUserBundle 路由 Symfony2

    我想覆盖 FOSUserBundle 的一些路由 MyBundle Resources config routing security yml fos user security login path locale login defaul
  • Spyder 内部问题,如何解决?

    我对编码完全陌生 但是 当我尝试运行如图所示的一些代码时 出现了这个问题 我尝试重新安装但不起作用 Spyder 维护者在这里 带来不便敬请谅解 这是 Anaconda 中的一个错误 我们已经向他们报告了该错误 但尚未修复 如果您只需要使用
  • 将 SVG 元素添加到 html 文件中?

    我想将一些 SVG 元素添加到 html 文件中 我发现链接说不支持此功能 文档类型必须是 xhtml 但我正在使用一些带有 html 的 javascript 库 这些库允许我在其中使用 SVG Raphael SVG Web 等 那么有