开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用js更改svg属性？

问如何用js更改svg属性？
EN

Stack Overflow用户

提问于 2022-01-03 03:30:56

回答 2查看 273关注 0票数 0

今天，我遇到了一些问题，使用onclick方法用js更改svg的属性；

以下是我想做的事：

以下是我所做的：

(有箭头，但灰色盖住了)

这是我的代码：

function social() {
  document.getElementById("svg1").style.backgroundColor = "grey";
  document.getElementById("arrow").setAttribute("fill", "#ff00ff")
}

<div id="svg1">
  <svg id="arrow" onclick="social()" xmlns="http://www.w3.org/2000/svg" width="15" height="13">
    <path fill="#6E8098"
    d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
  </svg>
</div>

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-01-03 03:38:10

使用document.getElementById("arrow")，您正在搜索<svg>元素。

然后您将更改它的fill属性，但是<path />元素的fill属性会覆盖它。因此，您必须将id="arrow"从<svg>移动到path，将fill从<path />移动到<svg>

function social() {
  document.getElementById("svg1").style.backgroundColor = "grey";
  document.getElementById("arrow").setAttribute("fill", "#ff00ff")
}

<div id="svg1">
  <svg onclick="social()" xmlns="http://www.w3.org/2000/svg" width="15" height="13">
    <path id="arrow" fill="#6E8098"
    d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
  </svg>
</div>

或

function social() {
  document.getElementById("svg1").style.backgroundColor = "grey";
  document.getElementById("arrow").setAttribute("fill", "#ff00ff")
}

<div id="svg1">
  <svg id="arrow" onclick="social()" xmlns="http://www.w3.org/2000/svg" width="15" height="13" fill="#6E8098">
    <path 
    d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
  </svg>
</div>

票数 2

EN

Stack Overflow用户

发布于 2022-01-03 03:39:20

我建议使用CSS类，然后使用classlist.toggle按一下移动它：

function social() {
  document.getElementById("arrow").classList.toggle('active');
}

.active {
    background: grey;
    border-radius: 30px;
    padding: 10px;
}

.active > path {
  fill: white;
}

<div id="svg1">
  <svg id="arrow" onclick="social()" xmlns="http://www.w3.org/2000/svg" width="15" height="13">
    <path id='path' fill="#6E8098"
    d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
  </svg>
</div>

票数 1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70565125

复制

相关文章

SVG - 基本的SVG属性

SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。 line - 直线拥有四中基本属性 x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束 demo <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" st

HTML5学堂

2018/03/12

4.1K0

SVG绘图-SVG.js

node.js svg api

官方文档：https://svgjs.dev/docs/3.0/getting-started/

码客说

2021/12/05

6.4K0

[踩坑]iconfont Symbol svg引入无法更改颜色

最近公司组织架构调整（反正每次组织架构调整，领导就会下场。有一个idea或者有重构一下，先定一个月底上），被拉取一个项目组做新项目。这边图标现状：有些项目是font-face方式，有些用的阿里图标库，最近又在用腾讯图标库，有些甚至直接切图。

玖柒的小窝

2021/11/16

3.7K0

[踩坑]iconfont Symbol svg引入无法更改颜色

SVG 的 path 属性绘制图形

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。

逃跑计划

2022/08/04

1.5K0

SVG 的 path 属性绘制图形

小技巧：如何用 Chrome 将 SVG 转成 PNG

怎么把 SVG 转成 PNG ？用 Chrome 吧，非常好用，还能设定自己想要的尺寸。

GoCoding

2021/05/06

2.5K0

小技巧：如何用 Chrome 将 SVG 转成 PNG

如何更改github工程的语言属性

github java html git

当创建github项目的时候，github本身会根据提交文件的数量来自动推断工程的开发语言，有时这种推断结果会与实际情况不太相符。

Python疯子

2018/09/06

3.5K0

JS控制SVG缩放+鼠标控制事件

直接撸代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js控制SVG缩放</title> </head> <body> <svg id="svg" style="background-color: #FAFAFA;"> <g id="svgPanel"> <g id="grid"></g> <defs>

青梅煮码

2023/03/13

24.7K0

可枚举属性对象属性可枚举，表示该属性的值不可修改，可认为该属性是常量。如何定义不可枚举的属性? var obj = {name: 'jack', age:23} Object.definePro

用户2936342

2018/08/27

9.7K0

相信对于对象属性大家都或多或少的知道一些，那么本文从属性说开去，看看大家对属性的了解是否有遗漏的部分。

RobinsonZhang

2018/11/07

15.9K0

js nextSibling属性和previousSibling属性

node.js 编程算法 html https java

该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。

全栈程序员站长

2022/09/14

6.9K0

三种方式：object、embed、mask引用 Svg 并更改样式

方式1：使用Object、embed标签引入 html <div class="item"> <object data="test.svg" type="image/svg+xml"></object> <embed src="test.svg" type="image/svg+xml" /> </div> 更改颜色，大小可通过css处理 .item { overflow: hidden; object,embed { cursor: pointer; filter: dro

White feathe

2022/04/21

1.2K0

一篇文章带你了解SVG stroke属性

将笔划宽度设置为3个像素。您可以使用不同于像素的单位。在[SVG坐标系统单位中查看所有可用单位。

前端进阶者

2021/03/03

1.3K0

一篇文章带你了解SVG stroke属性

一篇文章带你了解SVG fill 属性

使用较深的蓝色(#000066)描边颜色和较浅的蓝色(#3333ff)填充颜色定义圆。

前端进阶者

2021/03/03

5.1K0

一篇文章带你了解SVG fill 属性

How to load SVG file into SVGRenderer in three.js

原文： https://stackoverflow.com/questions/33140342/how-to-load-svg-file-into-svgrenderer-in-three-js I'm trying to use SVGRenderer in three.js (http://threejs.org/examples/#svg_sandbox). The example shows you how to make an SVG element (a circle) on the

周星星9527

2021/11/15

5.6K0

js类公有属性和私有属性

function Test(){ var name = 'test'//私有 this.age = 12//公有 this.getName = function(){ return name } this.getAge = function(){ return this.age } } var Test = new Test() print(Test.name)//undefined print(Test.age)//12 print(Test.getAge())//12 print

Java架构师必看

2021/08/19

5.5K0

LayUI switch 开关监听获取属性值、更改状态

背景今天在设计页面时，想使用一下 LayUI 的 switch 控件，在需要更改状态的时候进行 ajax请求传输需要获取其中的自定义属性值，同时根据服务器返回数据进行状态的更改通过参考文档及网友

泥豆芽儿 MT

2019/03/20

20K0

LayUI switch 开关监听获取属性值、更改状态

给js对象添加属性和方法属性_js给json对象添加属性

https 网络安全

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

全栈程序员站长

2022/11/01

20.9K0

js删除对象属性

对于你对delete运算符非常感兴趣，可以查看kangax写的一篇关于delete语句的非常深入的文章，理解delete。

IT工作者

2021/12/29

16.2K0

深入 JS 对象属性

javascript java

对象的普通属性将字符串名称映射到值。例如，下面对象obj有一个数据属性，名称为 prop，对应的值为 123：

前端小智@大迁世界

2019/09/10

8.7K0

JS函数的属性

apply arguments bind prototype 作用域

3.prototype:在创建自定义引用类型以及实现继承时,该属性的作用极为重要,该属性不可枚举,因此使用for-in 无法发现

大道七哥

2019/09/10

8.1K0

相似问题

如何用javascript更改svg文件的属性？

22

如何用jQuery更改SVG的CSS？

143

用javascript更改SVG属性

21

如何用svg.js制作Ember组件？

14

如何用SVG (+JS)绘制正弦波？

70

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例