如何在 SVG 中使用淡入淡出效果，例如 css 过渡到图像标签

Question

>我有一个被多边形剪裁的 svg 图像。我总共有 5 张图像，我让图像每 3 秒通过 JS 更改一次。

看起来还可以，但是图像切换太快太突然，所以我想在它们切换时使用一些淡入淡出效果。

谁能帮我弄清楚如何实现这一目标？到目前为止，我已经了解到 css 过渡不能用于 svg 属性。

<?xml version="1.0" encoding="utf-8"?>
<svg x="0px" y="0px" viewBox="0 0 300 300"
   style="position: absolute; top: 0; left: 0;" xml:space="preserve">
   <clipPath id="clip01">
      <polygon class="st0 line01"
         points="212.1,0.7 212.1,175.5 434.9,85.2" />
   </clipPath>
   <image xlink:href="img/bg_01.jpg" x="-100" y="0" width="1000"
      height="500" style="clip-path: url(#clip01);" opacity="1" />
</svg>

<script>
$(function () {
var i = 1;
function changeBG() {
document.querySelector("image").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'img/bg_0' + i + '.jpg');
i++;
}
setInterval(changeBG, 2000);
});
</script>

Answer 1

这就是我的做法：在我的示例中，在 JavaScript 中，每 3 秒更改一次不透明度，而在 CSS 中，您transition:opacity 1s;

let theopacity = 1;
setInterval(function(){ 
theopacity = Math.abs(theopacity - 1) ;
img.style.opacity = theopacity;
}, 3000);

svg{border:1px solid;}
image{
opacity:1;
transition:opacity 1s;
}

<svg x="0px" y="0px" viewBox="170 0 300 175" style="position: absolute; top: 0; left: 0;" xml:space="preserve">
   <clipPath id="clip01">
      <polygon class="st0 line01"
         points="212.1,0.7 212.1,175.5 434.9,85.2"/>
   </clipPath>
   <g style="clip-path: url(#clip01);">
   <image xlink:href="https://www.rocketgardens.co.uk/wp-content/uploads/2017/10/edible-flower-planter-1000x500.jpg" x="-100" y="0" width="1000" height="500"  opacity="1">
   </image>
   <image id="img" xlink:href="https://images.discerningassets.com/image/upload/c_fit,h_1000,w_1000/c_fit,fl_relative,h_1.0,l_deco_watermark,o_40,w_1.0/v1522547348/Lilac-Blooms-Lavender_crpsoc.jpg" x="-100" y="0" width="1000" height="500"  opacity="1">
   </image>
   </g>  
</svg>

Answer 2

我就是这样做的。这个想法有点类似于enxaneta的想法。

<?xml version="1.0" encoding="utf-8"?>
    <svg id="svg02" class="svg02" x="0px" y="0px" viewBox="0 0 575.2 481.5" style="position: absolute; top: 0; left: 0;" xml:space="preserve">
    <clipPath id="clip01">
        <polygon class="st0 line01" points="212.1,0.7 212.1,175.5 434.9,85.2    " />
    </clipPath>
    <image class="image_01" xlink:href="img/bg_01.jpg" x="-200" y="0" width="1000" height="500" style="clip-path: url(#clip01);" />
    <image class="image_02" xlink:href="img/bg_01.jpg" x="-200" y="0" width="1000" height="500" style="clip-path: url(#clip01);" />
</svg>
<script>
var imgChange = function() {
var i = 1;
function changeBackground() {
    $(".image_02")
        .hide()
        .fadeIn();
    if (i > 5) {
        i = 1;
    }
    document
        .querySelector(".image_01")
        .setAttributeNS(
            "http://www.w3.org/1999/xlink",
            "xlink:href",
            "img/bg_0" + (i - 1) + ".jpg"
        );
    document
        .querySelector(".image_02")
        .setAttributeNS(
            "http://www.w3.org/1999/xlink",
            "xlink:href",
            "img/bg_0" + i + ".jpg"
        );
    i++;
}
setInterval(changeBackground, 3000);
};
imgChange();
</script>

Answer 3

添加一个<animate>标签：

<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite"/>

<?xml version="1.0" encoding="utf-8"?>
<svg x="0px" y="0px" viewBox="0 0 300 300" style="position: absolute; top: 0; left: 0;" xml:space="preserve">
   <clipPath id="clip01">
      <polygon class="st0 line01"
         points="212.1,0.7 212.1,175.5 434.9,85.2"/>
   </clipPath>
   <image xlink:href="img/bg_01.jpg" x="-100" y="0" width="1000" height="500" style="clip-path: url(#clip01);" opacity="1"/>
   
   <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite"/>
   
</svg>