以文本方式查看主题

-  计算机科学论坛  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  如何实现SVG图形的均匀闪烁??  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=37430)

--  作者：vachin
--  发布时间：8/30/2006 3:58:00 PM

--  如何实现SVG图形的均匀闪烁??
不用脚本,只用SVG的Animation如何实现一个图形的均匀时间的闪烁

变化visibility或是opacity

我只能让它闪烁一次,使用repeatCount时有问题!!!!

有谁试过啊??!!谢谢!

--  作者：tamefox
--  发布时间：8/30/2006 6:40:00 PM

--  
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
 <desc>
  <!-- put a description here -->
 </desc>
 <script type="text/javascript"><![CDATA[
 var timerIncrement=20;
 var limit=2000;
 var timeValue=0;
 function twinkle(){
         var obj=document.getElementById("c");
        timeValue = timeValue + timerIncrement;
        if(timeValue>limit){
        timeValue = 0;
        }
       else if(timeValue>(limit/2)){
          opacityfactor = timeValue/(limit+3*(limit-timeValue));
        }
       else{
           opacityfactor = limit/(limit+timeValue*8);    
       }
       obj.setAttribute("opacity", opacityfactor);
       setTimeout("twinkle()", timerIncrement/2);
    } 
 ]]></script>
 <g>
  <!-- your graphic here -->
  <circle id="c" r="50" cx="100" cy="100" onclick="twinkle()"></circle>
 </g>
</svg>


--  作者：wwwtiger
--  发布时间：8/31/2006 8:38:00 AM

--  
<circle id="c1" r="50" cx="200" cy="200" >
  <animate attributeName="opacity" from="0" to="1" dur="0.5s"
                  repeatCount="indefinite" />
  </circle>

ASV 3.03 WINXP下可以闪烁

--  作者：vachin
--  发布时间：8/31/2006 11:25:00 AM

--  
谢谢楼上的
我用的是
<animate id="Flash" attributeType="CSS" attributeName="visibility" from="visible" to="hidden" dur="1s" repeatCount="indefinite" />

看看这个

<?xml version="1.0" encoding="UTF-8"?>
<svg  width="400px" height="300px" viewBox="0 0 400 300" fill="none">
    
<defs>
<animate id="Flash" attributeType="CSS" attributeName="visibility" from="visible" to="hidden" dur="1s" repeatCount="indefinite" />
</defs>

<rect x="50" y="50" width="200" height="200" stroke="red" fill="none"/>

<g transform="translate(150,150)">
<circle cx="10" cy="10" r="60" fill="red" stroke="blue">
<use xlink:href="#Flash"/>
</circle>
</g>

</svg>


animate可以在defs中定义,并且使用use来调用吗?

--  作者：wwwtiger
--  发布时间：8/31/2006 12:51:00 PM

--  
为什么非要这样用呢，象下面这样不行吗？
<defs>
<circle id="Flash" cx="10" cy="10" r="60" fill="red" stroke="blue">
<animate attributeType="CSS" attributeName="visibility" from="visible" to="hidden" dur="1s" repeatCount="indefinite" />
</circle>
</defs>

<g transform="translate(250,250)">
<use xlink:href="#Flash"/>
</g>

W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 62.500ms