程序员经验分享-hwhale

使用 JS 操作 HTML 中的 SVG

2024-03-22

我在 html 嵌入的 svg 图像中使用 javascript 构建 svg 元素时遇到问题。我创建了两个应该完全相同的文件，但其中一个是用 js 构建的。

SVG.html

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Pozadí</title>
 </head>
 <body>
  <svg
    id="pozadi"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    height="200"
    width="200"
   >
   <path
     d="M 0,0 L 150,150 L 100,150 L 150,150 L 150,100"
     style="stroke: #000; stroke-width: 2px; stroke-linecap: round; fill: none;"
    >
    <animate
      from="M 0,0 L 150,0 L 115,35 L 150,0 L 115,-35"
      to="M 0,0 L 150,150 L 100,150 L 150,150 L 150,100"
      dur="10s"
      begin="5s"
      attributeType="XML"
      attributeName="d"
     >
    </animate>
   </path>
  </svg>
 </body>
</html>


JS.html

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Pozadí</title>
 </head>
 <body>
  <svg
    id="pozadi"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    height="200"
    width="200"
   >
  </svg>
  <script>
   var svg  = document.getElementById('pozadi');
   var path = document.createElementNS('http://www.w3.org/2000/svg/','path'); //I have tried createElement(string) too
   path.setAttribute('style',"stroke: #000; stroke-width: 2px; stroke-linecap: round; fill: none;");
   path.setAttribute('d',"M 0,0 L 150,150 L 100,150 L 150,150 L 150,100");
   var anim = document.createElementNS('http://www.w3.org/2000/svg/','animate');
   anim.setAttribute('from','M 0,0 L 150,0 L 115,35 L 150,0 L 115,-35');
   anim.setAttribute('to','M 0,0 L 150,150 L 100,150 L 150,150 L 150,100');
   anim.setAttribute('dur','10s');
   anim.setAttribute('begin','5s');
   anim.setAttribute('attributeType','XML');
   anim.setAttribute('attributeName','d');
   path.appendChild(anim);
   svg .appendChild(path);
  </script>
 </body>
</html>

第二个文件 JS.html 是纯白色的。
我想问一下，如何纠正？谢谢，m93a


var path = document.createElementNS('http://www.w3.org/2000/svg/','path');

是错的。你要

var path = document.createElementNS('http://www.w3.org/2000/svg','path');

请注意缺少尾随 / 字符。同样的问题

var anim = document.createElementNS('http://www.w3.org/2000/svg/','animate');

如果你修复这两行，你应该会看到箭头（我在 Firefox 中这样做），这是一个jsfiddle来证明这一点 http://jsfiddle.net/longsonr/TuYYh/.

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

javascript

html

SVG

使用 JS 操作 HTML 中的 SVG 的相关文章

  • 是否有任何理由使用 axios 而不是 ES6 fetch [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 研究了 axios 和 ES6 fetch 的文档 我发现两者非常相似 并且都受到 ajax 及其简写的强烈影响 axios 的主要优点是浏览器

  • 保证金如何运作？

    我在下面提供了marginfix这是一个块级元素并且one and two也是块级的 但它们是浮动的 这就是为什么它们位于同一行布局的原因 但是marginfix也不浮动 块级元素应位于该元素下方 如下所示

  • 仅从功能区打开一个对话框

    我有一个带有登录按钮的功能区 可打开登录对话框 我想将对话框的数量限制为一个 我正在使用函数 displayDialogAsync startAddress options callback https learn microsoft co

  • 替换img路径jquery

    我正在尝试替换 jquery 中的 img 路径 注入远程页面 replaceexample com thumbs withexample com images 我已经尝试过这个 但似乎不起作用 img attr src replace t

  • 在已标记的输入元素上使用“aria-labelledby”的目的是什么？

    许多 ARIA 演示网站使用以下代码

  • 如何使用 github 托管外部 CSS 文件？

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github

  • document.write 在同一页面上显示内容。

    我对 javascript document write 方法有疑问 大多数情况下 当我使用 document write 时 它会向我显示在不同页面中使用该方法编写的内容 例如 如果我写这样的命令 document write Hello

  • 公开闭包内的方法

    当我们在闭包内创建一个方法时 该方法将成为该闭包的私有方法 并且在我们以某种方式公开它之前无法访问它 怎么可能暴露呢 您可以返回对它的引用 var a function var b function I m private alert go

  • 是否有跨浏览器的方式在Javascript中设置style.float？

    通常 如果您需要在 JavaScript 中设置样式属性 您可以这样说 element style attribute value 虽然略有不同 但属性名称通常与 HTML 属性名称类似 尽管是驼峰式 对我来说问题是 float 属性不起作

  • 等待异步 grunt 任务完成

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

  • 使用 eval 时不会受到 XSS 威胁

    我正在制作 不是现在 但我仍然对这个感到好奇 一款使用 HTML5 和 JS 的游戏 我想要的是人们可以插入自定义脚本 但要安全 function executeCustomJS code eval code bad 当然这段代码非常糟糕

  • 为什么浏览器允许onmousedown JS改变href？

    我很长时间以来都注意到 当您尝试复制链接位置或在 Facebook 上打开链接时 它会修改链接并将其传递给l php 例如 我可以被发送到 http www facebook com l php u http 3A 2F 2Fwww goo

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

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

  • 即使我的情况按预期发生变化，Angular ngClass 也不会更新我的课程

    我正在创建的模板中有类似的内容 div class nng 3 div 价值app layout isNavbarFixed等用零或一初始化 并且页面第一次加载时 适当的类被插入到我的div 不过 此后通

  • 为什么 console.log() polyfill 不使用 Function.apply()？

    我一直在看一些流行的console log 包装 填充 保罗 爱尔兰的 http paulirish com 2009 log a lightweight wrapper for consolelog 本阿尔曼的 http benalman

  • 从浏览器访问本地文件？

    您好 我想从浏览器访问系统的本地文件 由于涉及大量安全检查 是否可以通过某种方式实现这一目标 或使用 ActiveX 或 Java Applet 的任何其他工作环境 请帮帮我 要通过浏览器访问本地文件 您可以使用签名的 Java Apple

  • JavaScript setTimeout 和更改系统时间会导致问题

    我注意到如果我设置setTimeout未来1分钟 然后将我的系统时间更改为过去5分钟 setTimeout功能将在 6 分钟后触发 我这样做是因为我想看看夏令时系统时钟更改期间会发生什么 我的 JavaScript 网页使用setTimeo

  • jQuery：向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl

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

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

  • HTML5 地理定位 - 在 iOS 上无法始终工作

    目前正在使用 HTML5 地理定位 我已经在所有网络浏览器上测试了它 它似乎工作正常 然而 当我在 iPad 上测试地理定位时 它在 iPad mini 上始终有效 但当我将其放在更大的 iPad iPad 2 上时 位置似乎并不总是有效

随机推荐

热门标签