使用js动态改变svg属性中的值

最新推荐文章于 2024-05-14 10:55:03 发布
最新推荐文章于 2024-05-14 10:55:03 发布
阅读量1.3w 收藏 2
点赞数 2
分类专栏： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/machunmei2/article/details/9081571
版权
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml">
 <body>
  <svg id="svg" width="100%" height="100%" version="1.1" xmlns=" http://www.w3.org/2000/svg" xmlns:xlink=" http://www.w3.org/1999/xlink">
   <script type="text/ecmascript">
    function create_a(evt){ //方法可以进来
     document.getElementById("mycircle").style.fill='red';
     var r = document.getElementById("mycircle").getAttribute("r");
     r = r+5;
     document.getElementById("mycircle").setAttribute("r",r);
    }
   </script>
   <circle id="mycircle" cx="20" cy="40" r="5" style="fill:blue" οnclick="create_a(evt)"/>
  </svg>
 </body>
 </html>
爱吃的胖子要减肥
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态改变SVG的颜色
clearNew的博客
05-16 2万+
最近写页面，根据设计标签 hover的时候需要改变图片颜色状态，切下的图又是svg格式，使用外部引入的方式； 网上搜索发现 1、可以在svg文件中更改fill属性更改图片，但是就不能动态更改了呀；除非使用内敛方式，但是页面中展示svg内容感觉不是很好； 2、查看path标签内fill属性的值，要实现鼠标移入更改svg颜色，即修改fill属性值 svg:hover path{ fill:red; } 但是我用的是img标签引入的，好像是找不到svg的，也不太行 3、通过网上查看可以使用 css filt
SVG入门 - javascript操作
natsu-cc的博客
03-25 2318
DOM操作 svg看起来是一个整体，但是如果svg代码直接写在HTML页面之中，它就成为页面DOM的一部分，可以直接用DOM操作。 <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle id="mycircle" cx="400" cy="300" r="50" /> <svg> 上面代码插入网页之后，也可以用 CSS 定制样式： circle { s
使用js动态设置svg的颜色和宽高
momo_mom177的博客
09-23 5168
使用js动态设置svg的颜色和宽高
11. JS操作SVG
最新发布
一名全栈开发工程师
05-14 574
在本文中，我们将探讨如何使用JavaScript与SVG交互，实现动态的图形效果。
svg入门：使用js去操作svg图像
热门推荐
胡世林的博客
06-21 2万+
怎么使用js去读取svg文件
JavaScript动态改变svg文本内容
zdeming
03-10 3824
svg文件： [code="svg"] Hello [/code] 若想实现动态交互，text标签必须有初值（例：Hello） 方法一： [code="js"] txt = svgDocument.getElementById("txt"); txt.firstChild.nodeValue="Hello World ！"; [/code] ...
vue动态加载SVG文件并修改节点数据的操作代码
10-14
如果无法修改后端配置，可以在开发环境中使用浏览器插件临时解决。在生产环境中，应确保SVG文件被正确地部署到允许跨域的服务器上。 - **SVG文件的动态上传**： 如果用户需要上传SVG文件，它们通常会被存储在OSS...
remove-svg-properties:从 SVG 中删除属性和样式
07-24
从 SVG 中删除属性和样式 安装 使用安装 npm install remove-svg-properties --save 用法 var rsp = require ( ‘remove - svg - properties’ ) ; rsp . remove ( options ) ; 选项 以下值是defaults src : 带...
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
10-14
Vue项目中使用SVG文件时，可以借助D3.js来简化SVG元素的管理和操作。通过D3的选择器，我们可以方便地定位和操作SVG元素，实现如文本赋值和颜色更改等功能。同时，D3.js的`zoom`功能使得SVG的放大缩小变得更加简单和...
worldMapJS:使用JavaScript在SVG中绘制地图
05-18
4. **易于操作**：开发者可以直接修改SVG代码，或者通过JavaScript API来改变地图的颜色、形状、大小等属性。 ### worldMapJS库的核心特性 1. **数据绑定**：worldMapJS支持将数据绑定到地图上的各个区域，以颜色...
HTML中使用SVG与SVG预定义形状元素介绍
09-28
例如，以下代码演示了如何通过JavaScript改变SVG元素的样式和属性： ```html <script type="text/javascript"> function ccc() { var a = document.getElementById("w1"); a.style.fill = "red"; a.setAttribute...
SVG JS 动态赋值
卡尔特斯
11-02 771
通过 text 标签进行测试 <svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"> <defs> <!-- 网格 --> <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <path fill="none" ..
学习笔记——SVG.js中的attr和move等位置相关方法
qq_41339126的博客
05-12 696
SVG.js插件中设置所有属性的方法attr()以及位置相关的方法。例如：x()、y()、dx()、dy()、cx()、cy()、center()、move()、dmove()方法的使用
SVG之text
weixin_34195364的博客
05-04 469
svg里输入文本用<text>元素 <text>基本属性 x,y stroke,fill font styles (x,y)用于指定文字起始位置。准确的说，x指定文字最左侧坐标位置，y指定文字baseline所处y轴位置。fill的默认为black，stroke默认为none。如果设置了stroke，字的边缘会...
js动态修改path值 svg_SVG基本形状path路径置换
weixin_39851918的博客
02-01 2197
前言前段时间研究 SVG 压缩优化，发现SVG预定义的 rect、circle、ellipse、line、polyline、polygon 六种基本形状可通过path路径转换实现，这样可以在一定程度上减少代码量。不仅如此，我们常用的 SVG Path 动画(路径动画)，是以操作path中两个属性值stroke-dasharray和stroke-dashoffset来实现，基本形状转换为path路径...
JavaScript获取SVG节点值
牧灵泉的崖巢
08-10 1万+
SVG 是 基于XML 来描述二维图形的语言。 SVG 的文本内容可以用一棵 DOM 树来描述，对 DOM 树不了解的朋友可以打开资源管理器，打个比方：本地磁盘就是根节点（树根）下面的文件夹就是节点，同级的文件夹之间称为兄弟节点，文件夹里还有文件夹，这个就叫子节点。
html svg 獲取ID值在rect,SVG javascript脚本
weixin_28861381的博客
06-21 291
SVG javascript脚本使用JavaScript，可以编写SVG脚本。通过脚本编写，您可以修改SVG元素，为其设置动画或侦听形状上的鼠标事件。当SVG嵌入HTML页面中时，可以在JavaScript中使用SVG元素。可以使用JavaScript编写SVG脚本。通过编写脚本，您可以修改SVG元素，设置它们的动画，或者监听形状上的鼠标事件。当SVG嵌入到HTML页面中时，可以在JavaScri...
使用js动态更改svg颜色
04-11
可以使用 JavaScript 来动态更改 SVG 图像的颜色。你可以使用 JavaScript 获取 SVG 元素，并使用 SVG API 中的 setAttribute 方法来设置其 fill 或 stroke 属性的值。例如，要将 SVG 元素的颜色更改为红色，可以使用以下代码： ``` var svgElement = document.querySelector('svg'); svgElement.setAttribute('fill', 'red'); ``` 请注意，上面的代码仅为示例。实际代码可能需要根据 SVG 元素的具体结构和属性名称进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值