Как я могу использовать эффект затухания, как переход CSS к тегу изображения в SVG?

Question

У меня есть изображение SVG, которое обрезается многоугольником. У меня всего 5 изображений, и я позволяю JS менять изображение каждые 3 секунды.

Выглядит нормально, но изображение переключается слишком быстро и резко, поэтому я хочу использовать эффект затухания при переключении.

Может ли кто-нибудь помочь мне понять, как мне этого добиться? До сих пор я узнал, что 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>