代码之家 › 专栏 › 技术社区 › Mathias F

使用冻结时通过javascript设置不透明度

svg javascript

Mathias F · 技术社区 · 10 年前

我有一个图像上的动画,该动画在2秒后淡出图像,并在动画完成后使用fill=“冻结”保持图像可见。

动画工作正常。

设置冻结时,如何通过javascript更改不透明度?现在我无法更改脚本中的不透明度。如果我删除了冻结,我的脚本可以工作,但动画不再像预期的那样工作(然后图像在完成后变得不可见)

   <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title></title>
    </head>
    <body>
<script language="javascript" type="text/javascript" >
window.onload = function() {
img1.addEventListener("click", clickImg);
};

function clickImg(event)
{
        event.target.setAttribute("opacity",'0');
}
</script>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" >


   <image x="25%" y="25%" width="30%" height="30%" id="img1" 
   opacity="0"

   preserveAspectRatio="xMinYMin meet"
     xlink:href="img/3dugs.jpg" >

      <animate attributeName="opacity" 
       fill="freeze"
   attributeType="CSS" 
   begin="2s" dur="2s" from="0" to="1" 
   repeatCount="1" />

     </image>
  </svg>
    </body>
</html>

2 回复 | 直到 10 年前

Oscar Paz 10 年前

使用animationEnd事件了解动画何时完成。在处理程序中,移除动画并将不透明度设置为1:

下面是一个跨浏览器代码,它可以做到这一点:

$('#img1').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
    //remove the animation here.
    $(this).css('opacity', 1);
});

我想您可以通过为包含动画的图像设置CSS类来开始动画。在我给您的处理程序中,删除所述类并将不透明度设置为1。

希望这对你有所帮助。

helderdarocha 10 年前

如果您只是想使图像不可见,可以将其从DOM树中删除:

var img1 = document.getElementById("img1");
window.onload = function() {
    img1.addEventListener("click", clickImg);
};

function clickImg(event) {
    img1.style.display = "none";
}

你可以在这里测试 JSFiddle

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前