SVG目标褪色
SVG目标褪色
提问于 2022-06-29 19:44:50
我想把svg圆圈的填充颜色从一种颜色淡出到另一种颜色，就像从红色到黑色。
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" fade-to="black"/>
</svg>
我要做什么来代替fade-to="black"
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-06-29 19:50:55
您将希望使用径向梯度来完成这项工作。为了达到预期效果，您可以使用偏移号。
<svg height="100" width="100">
<defs>
<radialGradient id="myGradient">
<stop offset="10%" stop-color="red" />
<stop offset="95%" stop-color="black" />
</radialGradient>
</defs>
<!-- using my radial gradient -->
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="url('#myGradient')"/>
</svg>
希望这能有所帮助！
编辑*：在做了更多的研究，并弄清楚了如何做你的建议，这是我想出来的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.redBall{
fill: red;
z-index: 1;
-webkit-animation: pulsateMore 3s ease-out;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes pulsateMore {
0% {
fill: red;
}
50% {
fill: black;
}
00% {
fill: red;
}
}
</style>
<!-- <link rel="stylesheet" href="style.css" /> -->
</head>
<body>
<svg height="100" width="100">
<circle class="redBall" cx="50" cy="50" r="40"/>
</svg>
</body>
</html>
您可以从这里操作此代码，使Javascript函数具有一个onClick事件，该事件将触发从红色到黑色的圆圈，而不是脉动。如果这对你有帮助，请接受这个答案，谢谢！
Stack Overflow用户
发布于 2022-06-30 18:13:47
基本上，您只需要用以下两种方法来更改圆的fill属性：
- css (例如:悬停)
- SMIL动画(使用
begin="click") - javaScript (例如，单击eventListner)
let dotJs = document.querySelector('#dotJs');
dotJs.addEventListener('click', function(e) {
e.currentTarget.classList.toggle('active')
})circle {
transition: 0.5s fill;
}
.active {
fill: #000
}
#dotCSS:hover {
fill: #000
}<p>Css hover</p>
<svg height="100" width="100">
<circle id="dotCSS" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<p>JS click</p>
<svg height="100" width="100">
<circle id="dotJs" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<p>SMIL click</p>
<svg height="100" width="100">
<circle id="dot" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<animate id="startAnimation"
href="#dot"
attributeName="fill"
from="red"
to="black"
begin="click"
dur="0.5s"
repeatCount="0"
fill="freeze"
/>
</svg>
查看Mike Harris的帖子:切换SVG而不使用任何脚本以获得一个更高级的svg示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72807028
复制相关文章
相似问题
腾讯云开发者
