程序员经验分享-hwhale

在 HTML5 中使用 JS 创建内联 SVG

2024-05-15

我正在使用本地 HTML5 文件——它有<!DOCTYPE html>在顶部。我在里面放了这样的东西：

<svg height="2em" width="3em" preserveAspectRatio="none" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="red"/>
</svg>

（没有命名空间，感谢 HTML5！），并且它在 Chrome 和 FF4 beta 中显示得很好。

现在我想通过 JS 创建同样的东西。我正在使用原型，所以我写了类似的内容：

var box = new Element('svg', {'width':'3em', 'height':'2em', 'preserveAspectRatio': 'none', 'viewBox': '0 0 100 100'});
box.appendChild(new Element('rect', {fill:'red', x:'0', y:'0', width:'100', height:'100' }));
container.appendChild(box);

我可以在 Firebug / DOM 检查器（FF 和 Chrome）中看到它正在为此创建相同的 DOM 结构。

我看到的唯一区别是属性（“preserveAspectRatio”和“viewBox”）都是小写的，但我尝试将第一个测试（静态 HTML）中的属性更改为全小写，并且它仍然工作正常，所以我不认为这是问题所在。

HTML5 SVG 功能是否仅限于静态 HTML，我仍然需要使用命名空间来通过 JS 添加 SVG 内容，还是还缺少其他内容？


事实证明这是一个命名空间问题：需要使用 createElementNS("http://www.w3.org/2000/svg", ...) 创建元素，而 Prototype 恰好没有内置 (new Element( ...）） 支持。所以我猜 HTML5 SVG 的情况基本上是“没有命名空间的 SVG 在解析过程中添加命名空间（但之后就像之前的 XHTML 一样）”。

P.S.，这里的“回答您的问题”按钮今天对我不起作用，所以如果有人将此添加为答案，我会将其标记为正确。 :-)

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

javascript

html

SVG

在 HTML5 中使用 JS 创建内联 SVG 的相关文章

  • 为什么我可以使用 Date 对象进行数学运算？ [复制]

    这个问题在这里已经有答案了 当我像这样减去两个日期对象时 const startTime new Date await someAsyncStuff const endTime new Date const elapsedTime endT

  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo

  • 如何使用 Nextjs/React 将 JSON 对象导出到 Excel？

    我有一个检索 json 对象的端点 如下所示 data id 1 temaIndicador Indian codigo 001 observaciones Interactions Specialist tertiary Regional

  • 为什么内部 DIV 会溢出到外部 DIV 之外？

    我已经远离 HTML 和 CSS 很久了 找不到这个简单问题的解决方案 我有一个 div 位于另一个 div 中 外层黑色 内层橙色 我的 HTML 和 CSS 是 outer position fixed width 30 height

  • 指定 HTML5 输入类型 = 日期的值输出？

    我想将本机日期选择器添加到我的应用程序中 该应用程序当前使用遗留的本地系统 日期输入支持尚未广泛普及 但如果我可以基于兼容性提供这两种实现 那就太理想了 有没有办法指定 HTML 日期选择器给出的值的输出 歌剧的默认设置是yyyy mm d

  • 修复 Raphaël 路径节点上 Tipsy 工具提示的位置

    这是一个非常具体且有些复杂的问题 所以我设置了一个最小测试用例 http reveal dk 8080 revealit dk tipsytest 在阅读本文的其余部分之前 您可能应该先了解一下 我的页面显示悬停时突出显示区域的图像Raph

  • 如何使用 Spring Boot 传输音频

    我想让用户能够播放声音 我的实现在 Firefox 上运行良好 在 Safari 上 不播放声音 我验证了音频控制可以在 Safari 中与其他网站一起使用 所以 我认为我必须更改控制器中的某些内容 控制器 RequestMapping v

  • 在给定索引上将字符串分成两部分并返回两部分

    我有一个字符串 需要在给定索引上拆分 然后返回两个部分 并用逗号分隔 例如 string 8211 8 211 98700 98 700 因此 我需要能够在任何给定索引上拆分字符串 然后返回字符串的两半 内置方法似乎执行分割 但只返回分割的

  • @fontface - 禅宗购物车中的 403 禁止错误

    我不确定这是否是发布此内容的正确位置 因为我不知道问题出在哪里 基本上 字体现在对我来说真的很痛苦 而且没有任何效果 我尝试从 google fonts 加载字体 但遇到了 IE 问题 所以我决定下载它们并自己提供服务 但现在它无法在任何浏

  • 为什么这个递归函数返回未定义？

    我正在尝试编写一个使用递归组合两个字符串的函数 我的代码如下 但我不知道为什么该函数返回未定义 特别是当我在基本情况下使用 console log 时 它不会打印未定义而是打印正确的值 var str3 function merge str

  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并

  • 基于范围内变量的角度设置形式动作

    我一直在尝试设置一个搜索表单 可以在其中注入表单操作属性 在我的表格中我有

  • 文件缓存：查询字符串与上次修改时间？

    我正在研究缓存网站资源的方法 并注意到大多数与我类似的网站都使用查询字符串来覆盖缓存 例如 css style css v 124942823 后来 我注意到每当我保存 style css 文件时 最后修改的标头都会 更新 使得查询字符串变

  • 如何在数据表角度中基于 JSON 动态填充表值？

    我在用着Angular 数据表 https l lin github io angular datatables 我需要能够根据返回的数据动态创建表 换句话说 我不想指定列标题 Example json数据 id 2 city Baltim

  • 如何捕获文本区域上的 Enter 按键而不是 Shift+Enter？ [复制]

    这个问题在这里已经有答案了 I m doing it for texarea A function should be called when the user press Enter but nothing should be done

  • 如何得知客户端从服务器的下载速度？

    根据客户的下载速度 我想以低质量或高质量显示视频 任何 Javascript 或 C 解决方案都是可以接受的 Thanks 没有任何办法可以确定 您只能测量向客户端发送数据的速度 如果没有来自客户端的任何类型的输入来表明其获取信息的速度 您

  • 在什么情况下，使用 HTTP/2 单独加载图像会比使用 HTTP/1.1 中的精灵一次加载所有图像慢？

    HTTP 2 使多路复用连接成为可能 从而消除了与服务器的多个连接的需要 通过单个连接 可以将许多单独的图像发送到客户端 这避免了将多个图像组合成一个并使用 CSS 将其分开的旧图像精灵模式 我很好奇精灵在 HTTP 2 世界中是否仍然会更

  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf

  • YouTube 点击时禁用 HTML5

    有没有办法让我们通过javascript禁用HTML5视频的 播放 暂停 点击全屏 功能 然后在我们再次需要时将其放回去 我不知道你是否可以禁用它们 但你可以使用 css 删除它们 video webkit media controls f

  • 如何强制下载图片？

    我的页面上有一个动态生成的图像 如下所示 img src 我不想告诉我的用户右键单击图像并点击保存 而是想公开一个下载链接 单击该链接将提示下载图像 如何实现这一目标 最初我在 js 中尝试这样做 var path my image att

随机推荐

  • laravel 5.3 新的 Auth::routes()

    最近开始使用laravel 5 3写博客 但是运行后出现一个问题php artisan make auth 当我运行这个时 它会在我的web php 这是其中的代码 Auth routes Route get home HomeContro

  • 使用画布元素作为文本区域

    我正在寻找有关如何使用类似于文本区域的画布元素的直接描述 我见过这样的项目Ace http ace ajax org 只是想知道如何像文本区域一样写入该区域 只是纯文本 没有什么花哨的 提前致谢 Ace 曾经是 Mozilla Skywri

  • C# - 继承WPF布局 - Window from Window

    我的 Window 继承有问题 我不明白问题是什么 我认为 我的布局 MediaLibrary xaml 必须继承 MainWindow 但我不知道该怎么做 有2类 主窗口 xaml

  • 如何在TFS Build中递归删除通配符文件？

    我想递归删除与特定模式匹配的文件 作为 TFS Build 中构建后清理例程的一部分 我试过这个

  • 在 apache 上托管多个 SSL 证书

    我希望有人能帮我解决这个问题 我有 2 个 IP 可用于执行此操作 并且需要在同一台 Apache 服务器上托管 2 个不同的安全 SSL 域 我已经读到 从 Apache 2 2 开始 可以使用某种插件来使用单个 IP 但我希望保持尽可能

  • 如何使用 sprintf 函数在字符中添加前导“0”而不是空格？

    我正在尝试使用sprintf函数为字符添加前导 0 并使所有字符长度相同 然而我得到的是领先空间 My code a lt c 12 123 1234 sprintf 04s a 1 12 123 1234 我试图得到什么 1 0012 0

  • 将 Gradle 脚本从根目录导入到子项目中

    我想在我的根 build gradle 中执行 apply from gradle script common gradle 并使其可用于我的所有子项目 我尝试将应用程序放入 子项目 中 但由于路径是相对的 因此并不总是可以解析 子项目并不

  • 从 PHP 生成渐变颜色

    我想知道如何构建一个给出颜色代码和 显示该颜色的渐变 例如 function generate color int colorindex Generate 10 pale colors of this color 请帮我 迈克尔引用的代码相

  • 使用 sed 删除非字母数字字符

    我正在尝试验证一些输入以删除一组字符 只允许使用字母数字字符加 句点 下划线 连字符 我测试了正则表达式 w here http gskinner com RegExr http gskinner com RegExr 它与我想要删除的内容

  • 是否可以将自定义属性添加到 Android 资源的样式中？

    我在我的项目中使用视图流组件 它允许开发人员覆盖一些属性 例如

  • .NET 远程处理回调

    是否可以通过远程处理传输回调 我想做一些类似的事情myRemoteObject PerformStuff x gt Console WriteLine x 如果没有 我将如何实现等效的功能 Edit 我知道 Remoting 已被 WCF

  • Swift：无法为“[UIViewController]”类型的值添加下标？

    我试图弄清楚如何在 Xcode 7 iOS9 上的 Swift 中解决此问题 并且我也遇到此错误 无法为 UIViewController 类型的值添加下标 索引类型为 Int 任何建议表示赞赏 谢谢 My code func indexP

  • 在 /dev/input/eventX 中写入事件需要哪些命令？

    我正在开发一个android需要将触摸事件发送到 dev input eventX 的应用程序 我知道C执行此类操作的代码结构如下 struct input event struct timeval time unsigned short

  • git push heroku master 权限被拒绝

    我正在关注 ruby railstutorial 我运行命令 git push heroku master 它吐出了这个错误 Permission denied publickey fatal Could not read from rem

  • 如何从 SQL Server 中的 SELECT 进行更新？

    In SQL服务器 可以将行插入到带有INSERT SELECT陈述 INSERT INTO Table col1 col2 col3 SELECT col1 col2 col3 FROM other table WHERE sql coo

  • 使用 tc 限制 Docker 容器的传出网络带宽

    我正在尝试对 Docker 容器进行带宽限制 为了限制下行带宽 我可以先找到容器的veth接口并使用tc tc qdisc add dev vethpair1 root tbf rate 1mbit latency 50ms burst 1

  • 在 Shiny 中叠加两个 ggplot

    我有一个非常大的数据集 我正在使用 ggplot 在 Shiny 上绘制它 我有一个与 x 轴上的值相关联的滑块 我想用它对选定的数据子集重新着色 并让其余数据保持原样 最简单的选择是重新创建整个绘图 但由于它是一个大型数据集 因此这是一个

  • kubernetes，提示符在端口转发命令处冻结

    我想在在线指南之后设置从本地端口 节点 到 pod redis master 的端口转发库伯内特斯 https kubernetes io docs tasks access application cluster port forward

  • Android 辅助功能服务检测通知

    我试图让我的应用程序在显示通知时进行检测 我已在设置应用程序中启用它并且onServiceConnected确实接到电话 但是当我创建通知或通过 gmail 应用程序接收电子邮件时 什么也没有发生 onAccessibilityEvent没

  • 在 HTML5 中使用 JS 创建内联 SVG

    我正在使用本地 HTML5 文件 它有在顶部 我在里面放了这样的东西

热门标签