如何在間隔內使用JavaScript更改SVG填充顏色

Question

我創建了這個SVG圖：

5段圈

SVG代碼：

<svg style="margin-top: 10px;transform: rotate(18deg);" viewbox='0 0 110 110'><a>
        <path class="frag logoa" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' data-link="1" id="f1"></path></a> <a>
        <path class="frag logoa" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' data-link="2"></path></a> <a>
        <path class="frag logoa" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z' data-link="3"></path></a> <a>
        <path class="frag logoa" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' data-link="4"></path></a> <a>
        <path class="frag logoa" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' data-link="5"></path></a>
        <circle class="cente" cx='55' cy='55' r='35'></circle>
        <circle class="minicirculo" cx='55' cy='55' r='15'></circle>
</svg>

我有一個單擊功能，當用戶單擊圓的特定段時，它會更改<div>內容。

示例： 細分1中的點擊顯示div 1

我想用顏色更改段“填充”的背景色，我可以用CSS來做，但是我想根據活動段來填充它。 如果用戶單擊細分1，則用紅色填充該細分。

這是div的html：

<div class="col-md-4">
            <div class="monitores" data-link="1">
                <p class="title22" style="margin-top: 15px;">
                    Product Title 1
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p><button class="botonavandel hvr-grow">Call to action</button>
            </div><!-- first -->
            <div class="monitores" data-link="2">
                <p class="title22" style="margin-top: 15px;">
                    Product Title 2
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p><button class="botonavandel hvr-grow">Call to action</button>
            </div><!-- second -->
            <div class="monitores" data-link="3">
                <p class="title22" style="margin-top: 15px;">
                    Product Title 3
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p><button class="botonavandel hvr-grow">Call to action</button>
            </div><!-- third -->
            <div class="monitores" data-link="4">
                <p class="title22" style="margin-top: 15px;">
                    Product Title 4
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p><button class="botonavandel hvr-grow">Call to action</button>
            </div><!-- four -->
            <div class="monitores" data-link="5">
                <p class="title22" style="margin-top: 15px;">
                    Product Title 5
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p><button class="botonavandel hvr-grow">Call to action</button>
            </div><!-- fifth -->

使用Javascript：

    window.setInterval( function(){
    var first = $(".monitores:first-of-type").remove();
    $(".monitores").parent().append(first);
    document.getElementById("f1").style.fill('red');

}, 3000);

$(document).on("click",".logoa",function() {
     var element =  $('.monitores[data-link=' + $(this).attr('data-link') + ']').remove();
     $(".monitores").parent().prepend(element);


});

CSS：

.monitores{
display:none;
}
.monitores:first-of-type{
display:block; 
}

.monitores:first-of-type{
opacity: 1;
}
.frag {
  fill: white;
  stroke: black;
  stroke-width: .5;
  transition: fill 0.3s ;
}

Answer 1

請參考下面的工作js小提琴，它將填充svg路徑的一部分。

您可以通過id獲取元素並根據需要進行更改

https://jsfiddle.net/yogesh078/sjn9wa9b/2/

注意：根據您的要求，您可以清除用戶單擊任何段后自動分配第一個svg路徑的間隔。

HTML：

  <svg style="margin-top: 10px;transform: rotate(18deg);" class="svgClass" viewbox='0 0 110 110'><a>
        <path class="frag logoa" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' data-link="1" id="f1"></path></a> <a>
        <path class="frag logoa" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' data-link="2"></path></a> <a>
        <path class="frag logoa" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z' data-link="3"></path></a> <a>
        <path class="frag logoa" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' data-link="4"></path></a> <a>
        <path class="frag logoa" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' data-link="5"></path></a>
        <circle class="cente" cx='55' cy='55' r='35'></circle>
        <circle class="minicirculo" cx='55' cy='55' r='15'></circle>
</svg><div class="col-md-4">
            <div class="monitores" data-link="1">
                <p class="title22" style="margin-top: 15px;">
                    Product Title 1
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p><button class="botonavandel hvr-grow">Call to action</button>
            </div><!-- first -->
            <div class="monitores" data-link="2">
                <p class="title22" style="margin-top: 15px;">
                    Product Title 2
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p><button class="botonavandel hvr-grow">Call to action</button>
            </div><!-- second -->
            <div class="monitores" data-link="3">
                <p class="title22" style="margin-top: 15px;">
                    Product Title 3
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p><button class="botonavandel hvr-grow">Call to action</button>
            </div><!-- third -->
            <div class="monitores" data-link="4">
                <p class="title22" style="margin-top: 15px;">
                    Product Title 4
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p><button class="botonavandel hvr-grow">Call to action</button>
            </div><!-- four -->
            <div class="monitores" data-link="5">
                <p class="title22" style="margin-top: 15px;">
                    Product Title 5
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>
                <p class="textoinfo">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p><button class="botonavandel hvr-grow">Call to action</button>
            </div><!-- fifth -->

使用Javascript：

  var interval = null;
 interval = window.setInterval( function(){
    var first = $(".monitores:first-of-type").remove();
    $(".monitores").parent().append(first);
   // document.getElementById("f1").style.fill('red'); 
    RemoveAllFIll();
    $("svg").find("#f1").css({ fill: 'red' });


}, 3000);
$(".logoa").click(function(){
//$(document).on("click",".logoa",function() {
 clearInterval(interval); // stop the interval
     var element =  $('.monitores[data-link=' + $(this).attr('data-link') + ']').remove();
     $(".monitores").parent().prepend(element);
     RemoveAllFIll();
     $(this).css({ fill: 'red' });

});

function RemoveAllFIll()
{
 $("svg").children("a").children("path").each(function () {
    //alert( $(this).attr('fill') );
     $(this).css({ fill: '#FFF' });
});
}

CSS：

  .monitores{
    display:none;
    }
    .monitores:first-of-type{
    display:block; 
    }

    .monitores:first-of-type{
    opacity: 1;
    }
    .frag {
      fill: white;
      stroke: black;
      stroke-width: .5;
      transition: fill 0.3s ;
    }