如何在區間 - 優文庫

我創造了這個SVG圖形改變SVG填充顏色使用JavaScript：如何在區間

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>內容時用戶點擊圓圈的某個部分。

例如： Clicks in segment 1 shows div 1

我想改變段「填充」顏色的背景色，我可以用CSS做，但我想這取決於主動段如填寫。如果用戶點擊Segment 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 ; 
}

來源

2017-08-12 Rodolfo R

請參考下面的工作爵士小提琴這將填補SVG路徑的一部分。

您可以根據您的要求

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

注獲得由id元素和改變：根據您的要求，您可以清除汽車上的任何段指派一旦用戶點擊第一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 ; 
    }

來源

2017-08-12 04:23:46 Yogesh

我覺得我的問題不是結構良好，我的意思是填充顏色動態地改變與「信息」div自動，然後如果用戶點擊來改變它。 –

回答

相關問題