单击轮播中的上一个或下一个按钮时更改 SVG 的填充

Question

<div class="container-fluid" style="overflow:initial">
        <div class="centratura-relative">
            <div class="under-background"><svg>.......</svg></div>
            <div class="over-background dipinto"><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" data-colore="#DC143C" src="..." alt="First slide">
                 <div class="carousel-caption padre">
                    <p class="description">Piccola descrizione foto</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" data-colore="#800080" src="...." alt="Second slide">
                 <div class="carousel-caption padre">
                    <p class="description">Piccola descrizione foto</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" data-colore="#ffd700" src="...." alt="Third slide">
                 <div class="carousel-caption padre">
                    <p class="description">Piccola descrizione foto</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev no-back" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next no-back" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        </div></div>
        </div>
    </div>
</section>



$('#carouselExampleIndicators').on('slide.bs.carousel', function () {

      
        $('.cls-3').css("fill","red");
      
    })

如果我有一个 SVG img 不在轮播中，当我点击轮播时我想要更改 SVG 填充。我怎样才能做到这一点？以轮播的 hte 项目为数据目标？请帮我。轮播是 bootstrap 轮播。我必须为轮播中的所有项目更改颜色。我想为每个具有不同颜色的项目执行此操作

Answer 1

假设您可以覆盖 fill 属性这应该有效

$('.carousel').carousel();
$('.carousel').on('slide.bs.carousel', function(ev) {
   
    var slide = $(ev.relatedTarget);
    var svgColor = slide.data('colore');
    $('.cls-3').css("fill", svgColor);
   
});

示例（自动滑动，查看整页演示，向下滚动查看SVG）

$(function() {
  $('.carousel').carousel();

  $('.carousel').on('slide.bs.carousel', function(ev) {
     var slide = $(ev.relatedTarget);
     var svgColor = slide.data('svgcolor');
     $('.cls-3').css("fill", svgColor);
  });
});

.cls-3 {
   width: 200px;
   height: auto;
   fill: #9bc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>


<div id="carouselExampleControls" class="carousel slide" data-mdb-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-svgcolor="#9bc">
      <img
        src="https://mdbootstrap.com/img/new/slides/041.jpg"
        class="d-block w-100"
        alt="..."
      />
    </div>
    <div class="carousel-item" data-svgcolor="#cb9">
      <img
        src="https://mdbootstrap.com/img/new/slides/042.jpg"
        class="d-block w-100"
        alt="..."
      />
    </div>
    <div class="carousel-item" data-svgcolor="#c9b">
      <img
        src="https://mdbootstrap.com/img/new/slides/043.jpg"
        class="d-block w-100"
        alt="..."
      />
    </div>
  </div>
</div>


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" class="cls-3">
<path d="M348,327.195v-35.741l-32.436-11.912c-2.825-10.911-6.615-21.215-12.216-30.687l0.325-0.042l15.438-32.153l-25.2-25.269
    l-32.118,15.299l-0.031,0.045c-9.472-5.601-19.758-9.156-30.671-11.978L219.186,162h-35.739l-11.913,32.759
    c-10.913,2.821-21.213,6.774-30.685,12.379l-0.048-0.248l-32.149-15.399l-25.269,25.219l15.299,32.124l0.05,0.039
    c-5.605,9.471-11.159,19.764-13.98,30.675L50,291.454v35.741l34.753,11.913c2.821,10.915,7.774,21.211,13.38,30.685l0.249,0.045
    l-15.147,32.147l25.343,25.274l32.188-15.298l0.065-0.046c9.474,5.597,19.782,10.826,30.695,13.652L183.447,460h35.739
    l11.915-34.432c10.913-2.826,21.209-7.614,30.681-13.215l0.05-0.175l32.151,15.192l25.267-25.326l-15.299-32.182l-0.046-0.061
    c5.601-9.473,8.835-19.776,11.66-30.688L348,327.195z M201.318,368.891c-32.897,0-59.566-26.662-59.566-59.565
    c0-32.896,26.669-59.568,59.566-59.568c32.901,0,59.566,26.672,59.566,59.568C260.884,342.229,234.219,368.891,201.318,368.891z"/>
</svg>

单击轮播中的上一个或下一个按钮时更改 SVG 的填充

Change SVG's fill when I click on a prev or next button in a carousel

javascript

css

svg

fill

carousel