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

这就是我的操作方式：在Java语言中，每3秒更改一次不透明度，而在CSS中，您有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>

select ORDER_TYPE, PRODUCT_CODE, sum(INCOME)
from Logistics
group by ORDER_TYPE, PRODUCT_CODE
order by ORDER_TYPE;

Answer 2

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

passwordInputs() => Container(
    padding: EdgeInsets.all(20.0),
    child: Center(
      child: ListView(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              _getEmail(),
              Padding(
                padding: EdgeInsets.only(top: 10.0),
              ),
              _getMobileNumber(),
              Padding(
                padding: EdgeInsets.only(top: 16.0),
              ),
              _getSubmit()
            ],
          ),
        ],
      ),
    ),
  );
}

Widget _getEmail() {
 return Container(
  margin: EdgeInsets.only(left: 4),
   child: TextField(
   maxLines: 1,
    decoration: InputDecoration(
    labelText: "Email*",
  ),
),
);
}

Widget _getMobileNumber() {
return Container(
margin: EdgeInsets.only(left: 4),
child: TextField(
  maxLines: 1,
   decoration: InputDecoration(
    labelText: "Mobile*",
   ),
  ),
 );
}

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>

如何在SVG中使用淡入淡出效果（如CSS过渡到图像标签）？

3 个答案: