使用 JS 更改 svg 元素的位置

2023-11-23

尝试制作一个在按下按钮时移动的 svg 矩形。现在我只想通过函数修改 x 。

function modX()
{
  document.getElementById("rectangle").transform = 'translate(295 115)';
}
var x = 20;
var y = 20;
modX();
<svg  width="1000" height="1000" >
  <rect id="rectangle" x="0" y="20" width="100" height="100" 
  style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
</svg>

我对代码相当陌生,所以请避免使用 css 或 jquery。


您可以使用 javaScript 更改其 xdocument.getElementById("rectangle").setAttribute('x', X_value)设置X_value到你想要它改变的值。

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

使用 JS 更改 svg 元素的位置 的相关文章

  • html 图像 src 调用 javaScript 变量

    这是我的代码 我想问 我怎样才能做到这一点 img src img apple 我一直在尝试使用 call 函数和 document onload 但它根本不起作用 有人可以救我吗 我假设你只是想用 javascript 更新图像 src
  • 个人 Tumblr 帖子上的 Javascript

    我知道您可以编辑在 tumblr 博客上呈现所有帖子博客主页的 html AngularJS 但是 有什么办法可以添加自定义到各个帖子 我想在逐个帖子的基础上做一些 javascript 的东西 但似乎无法找到可以编辑代码的位置 或者 如果
  • 纯 JS 相当于 Jquery eq()

    jquery 的纯等价物是什么eq 例如 我怎样才能实现 class1 class2 eq 0 text 1254 在纯 JavaScript 中 要获取数组中的元素索引 可以使用 在 JavaScript 中 因此 要重现您的代码 您可以
  • vuejs 模板和 asp.net 部分视图,好的做法吗?

    我在网站中使用 Vue js 并将模板添加到 html 代码中 并将 js 代码添加到单个 js 文件中 所以我不想使用 vue Vuefy Browserfy 方法 而是稍后捆绑并缩小我的 js 文件 由于我必须使用 Asp Net MV
  • http和https在编程中有什么区别[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我只知道 s 代表 安全 用户永远不
  • 使用 IE9、10、11 的 CSS 将比例打印到 50% 等百分比

    Zoom css 属性不适用于 IE9 10 11 观察到打印预览 UI 令人不安 默认比例为 缩小以适合 当我将此比例从 缩小 更改为适合 50 时 页面显示正常 打印预览 任何人都可以帮助我如何使用 CSS 代码将比例设置为 50 为页
  • 如何将本地文本文件上传到文本区域(网页内)

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一
  • 未捕获的异常:数据表编辑器 - 不允许远程托管代码

    我正在尝试使用 Datatables 使用 datatableseditor 来实现 CRUD 操作 但是我收到错误消息 1 未捕获的异常 数据表编辑器 不允许远程托管代码 请参见http editor datatables net有关如何
  • 如何绕过Access-Control-Allow-Origin?

    我正在一个平台上对我自己的服务器进行ajax调用 他们设置了阻止这些ajax调用的平台 但我需要它从我的服务器获取数据以显示从我的服务器数据库检索到的数据 我的 ajax 脚本正在运行 它可以将数据发送到我的服务器的 php 脚本以允许其处
  • Angular 2 将字符串转换为 md5 哈希

    我找到了ts md5 https www npmjs com package ts md5包 但在示例中它有一个hashStr方法 但现在不行了 类型上不存在属性 hashStr Md5 使用该错误后 该错误会记录在我的控制台中 我怎样才能
  • 从检查元素隐藏 ''

    我有这个 HTML 和 PHP 联系表
  • 检查浏览器空闲的替代方法

    我有一个简单的网络信息亭 在鼠标未使用 jQuery 移动 30 秒后显示用户操作提示 var i null body wrap mousemove function clearTimeout i overlay fadeOut i set
  • 如何在 Javascript 中连接 C# ActiveX 事件处理程序

    我尝试使用几个代码片段将 ActiveX 对象与 Javascript 事件处理程序挂钩 我无法确定为什么事件处理程序没有被调用 带有项目的 Github 存储库 https github com JesseKPhillips Csharp
  • 如何使用 Javascript OAuth 库不暴露您的密钥?

    看着Twitter OAuth 库 https dev twitter com docs twitter libraries 我看到了这个注释 将 JavaScript 与 OAuth 结合使用时要小心 不要暴露你的钥匙 然后 看着jsOA
  • 悬停时的 CSS 过渡

    我有个问题 实际上 当我将鼠标悬停在对象上时 我尝试在 div 上进行转换 所以基本上我有一个div 当我将鼠标悬停在div上时 它应该在其顶部显示另一个div 但是它应该被转换 这样悬停效果会更平滑 如果我有这两个 div 怎么可能 di
  • 如果 jquery 验证激活,如何在单选按钮中放置红色边框[重复]

    这个问题在这里已经有答案了 我的问题是 如果 jquery 验证像示例图片中那样激活 我无法使单选按钮具有红色边框 任何人都可以帮我解决这个问题吗 http i38 photobucket com albums e149 eloginko
  • 标题的下边框小于宽度

    我需要创建一个下划线效果底部边框小于h2标题的宽度 通常我不上传图片 但我认为这可能有助于进一步解释问题 您可以为此使用伪元素 例子 http jsfiddle net SZ39x pseudo border position relati
  • Html5画布最热门的任意形状

    我正在尝试开发可以在画布中渲染图像和文本的程序 我尝试处理画布中图像的点击 但它适用于可矩形图像 我的问题 您是否知道处理单击画布中图像的可见部分 非透明部分 的解决方案或框架 我正在寻找 ActionScript hitTestObjec
  • 在 Firestore 文本字段中存储文本文件并删除换行符

    我正在尝试将 CSV 文件存储在 Cloud Firestore 内的文本字段中 然而 Firestore 正在删除所有换行符并将整个 CSV 文件存储为一行 这Firestore 数据类型文档 https firebase google
  • Safari 扩展将消息发送到特定选项卡

    有没有办法从全局页面发送消息到特定选项卡 我目前正在做的是 在创建选项卡时 注入的脚本会创建一个唯一的 ID 并将包含该编号的消息发送到全局页面 并且全局页面会保存该编号 如果全局页面需要发送一些数据到一个tab 即 tab 3 然后全局页

随机推荐