blocks|key|453509|text|您将希望使用径向梯度来完成这项工作。为了达到预期效果，您可以使用偏移号。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|453510|​|453511|<svg+height="100"+width="100">
++<defs>
++++<radialGradient+id="myGradient">
++++++<stop+offset="10%25"+stop-color="red"+/>
++++++<stop+offset="95%25"+stop-color="black"+/>
++++</radialGradient>
++</defs>

++
++<circle+cx="50"+cy="50"+r="40"+stroke="black"+stroke-width="3"+fill="url('#myGradient')"/>
</svg>|code-block|syntax|javascript|453512|453513|希望这能有所帮助！|453514|编辑*：在做了更多的研究，并弄清楚了如何做你的建议，这是我想出来的：|453515|453516|<!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%25+{+
++++++++fill:+red;
++++++++}
++++++++50%25+{+
++++++++fill:+black;
++++++++}
++++++++00%25+{+
++++++++fill:+red;
++++++++}
++++}
++++</style>
++++
</head>
<body>
++++<svg+height="100"+width="100">
++++++++<circle+class="redBall"+cx="50"+cy="50"+r="40"/>
++++</svg>
</body>
</html>|453517|453518|您可以从这里操作此代码，使Javascript函数具有一个onClick事件，该事件将触发从红色到黑色的圆圈，而不是脉动。如果这对你有帮助，请接受这个答案，谢谢！|453519|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|10|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|14|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|U|$]]

<p>You will want to use the radial gradient to have this work. You can play around with the offset numbers for the desired effect.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg height="100" width="100"&gt;
  &lt;defs&gt;
    &lt;radialGradient id="myGradient"&gt;
      &lt;stop offset="10%" stop-color="red" /&gt;
      &lt;stop offset="95%" stop-color="black" /&gt;
    &lt;/radialGradient&gt;
  &lt;/defs&gt;

  &lt;!-- using my radial gradient --&gt;
  &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="url('#myGradient')"/&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>
<p>Hope this helps!</p>
<p>Edit***:
After doing some more research and figuring out how to do what you were suggesting, this is what I came up with:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
    .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;
        }
    }
    &lt;/style&gt;
    &lt;!-- &lt;link rel="stylesheet" href="style.css" /&gt; --&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;svg height="100" width="100"&gt;
        &lt;circle class="redBall" cx="50" cy="50" r="40"/&gt;
    &lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>
<p>You can manipulate this code from here to have a Javascript function that will have an onClick event that will trigger the circle to go from red to black, instead of pulsating. If this has helped you, please accept the answer, thanks!</p>


blocks|key|1540482|text|基本上，您只需要用以下两种方法来更改圆的fill属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1540483|css+(例如:悬停)|unordered-list-item|1540484|SMIL动画(使用begin="click")|1540485|javaScript+(例如，单击eventListner)|1540486|​|1540487|let+dotJs+=+document.querySelector('#dotJs');

dotJs.addEventListener('click',+function(e)+{
++e.currentTarget.classList.toggle('active')
})|code-block|syntax|javascript|1540488|circle+{
++transition:+0.5s+fill;
}

.active+{
++fill:+#000
}

#dotCSS:hover+{
++fill:+#000
}|1540489|<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>|1540490|1540491|查看Mike+Harris的帖子:切换SVG而不使用任何脚本以获得一个更高级的svg示例。|1540492|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/mikemjharris/post/svg-toggling^0|K|4|0|0|9|D|0|0|0|0|0|0|0|2|S|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$]]|$1|I|3|J|5|H|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|K|3|L|5|H|7|1F|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1G|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1H|8|@]|D|@]|E|$R|S]]|$1|T|3|U|5|Q|7|1I|8|@]|D|@]|E|$R|S]]|$1|V|3|W|5|Q|7|1J|8|@]|D|@]|E|$R|S]]|$1|X|3|N|5|6|7|1K|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|10|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

<p>Basically you just need to change the circle's <code>fill</code> attribute either with:</p>
<ul>
<li>css (e.g :hover)</li>
<li>svg SMIL animation (using <code>begin=&quot;click&quot;</code>)</li>
<li>javaScript (e.g. click eventListner)</li>
</ul>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let dotJs = document.querySelector('#dotJs');

dotJs.addEventListener('click', function(e) {
  e.currentTarget.classList.toggle('active')
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>circle {
  transition: 0.5s fill;
}

.active {
  fill: #000
}

#dotCSS:hover {
  fill: #000
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Css hover&lt;/p&gt;
&lt;svg height="100" width="100"&gt;
    &lt;circle id="dotCSS" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
&lt;/svg&gt;

&lt;p&gt;JS click&lt;/p&gt;
&lt;svg height="100" width="100"&gt;
    &lt;circle id="dotJs" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
&lt;/svg&gt;

&lt;p&gt;SMIL click&lt;/p&gt;
&lt;svg height="100" width="100"&gt;
    &lt;circle id="dot" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
      &lt;animate id="startAnimation"
               href="#dot" 
               attributeName="fill" 
               from="red" 
               to="black" 
               begin="click"
               dur="0.5s" 
               repeatCount="0"
               fill="freeze"
/&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>
<p>Check <a href="https://codepen.io/mikemjharris/post/svg-toggling" rel="nofollow noreferrer">Mike Harris' post: Toggling SVG without any scripting</a> for a more advanced svg only example.</p>


<p>I want to fade the fill color of a svg circle from one color to another color, like from red to black.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg height="100" width="100"&gt;
    &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" fade-to="black"/&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>
<p>What would I do in place of the <code>fade-to=&quot;black&quot;</code>?</p>


SVG fade color of object

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想把svg圆圈的填充颜色从一种颜色淡出到另一种颜色，就像从红色到黑色。​<svg height="100" width="100">    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" fade-to="black"...

问SVG目标褪色
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG目标褪色EN