Question

我有一些svg＆s;我想应用条件来应用颜色，我在jsfiddle链接中详细说明

第一个SVG只能应用红色/绿色
第二个SVG可以应用蓝色/橙色
第三个SVG可以应用黄色/粉红色

Answer 1

检查FIDDLE上的更新代码。在SVG标记中进行更改并将数据索引属性应用于圆形和按钮。如果选中的圆圈dta-index属性与点击的按钮数据索引属性相同，那么它将应用其他颜色显示提醒。

＆＃13;

var clickedPath = '';
var rIndex = '';
$('#select1,#select2,#select3').on("click", function() {
    clickedPath = $(this);
    rIndex = $(this).attr('data-index');
    clickedPath.css({ stroke: "#00ff00" });
});
		
$('.btn').on('click',function(){
    var attr = '';
    attr = $(this).attr('data-index').split(',');
    if($.inArray(rIndex,attr) >= 0 ){
      clickedPath.css({ fill: $(this).attr('data-color') });
    }else{
      alert("Wrong click");
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select SVG and Apply Color <br/>
	
	<svg width="100" height="100">
  	<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="yellow" id="select1" data-index = '1' />
  </svg>

  <svg width="100" height="100">
  	<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" id="select2" data-index = '2' />
  </svg>
  
  <svg width="100" height="100">
  	<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="red" id="select3"  data-index = '3' />
  </svg>


<br/> <br/> 
 
  Apply to Only 1st SVG / For 2nd and 3rd should not be Apply, Alert Box Should Come
  
<button class="btn" id="btn-test1" data-color="#ff0000" data-index = '1,2'>Red</button>
<button class="btn" id="btn-test2" data-color="#00ff00" data-index = '1,2'>Green</button>

<br/> <br/> 

Apply to Only 2nd SVG / For 1st and 3rd should not be Apply, Apply Alert Box Should Come

<button class="btn" id="btn-test3" data-color="#0000ff" data-index = '2,3'>Blue</button>
<button class="btn" id="btn-test4" data-color="#ff9300" data-index = '2,3'>Orange</button>
 
<br/> <br/>

 Apply to Only 3rd SVG / For  3rd and 1st should not be Apply, Apply Alert Box Should Come

<button class="btn" id="btn-test5" data-color="#ffba00" data-index = '3,1'>Yellow</button>
<button class="btn" id="btn-test5" data-color="#ff006c" data-index = '3,1'>Pink</button>

＆＃13;

Answer 2

我建议你：

更新了svg：

<button class="btn select1" id="btn-test1" data-color="#ff0000">Red</button>
<button class="btn select1" id="btn-test2" data-color="#00ff00">Green</button>

<button class="btn select2" id="btn-test3" data-color="#0000ff">Blue</button>
<button class="btn select2" id="btn-test4" data-color="#ff9300">Orange</button>

<button class="btn select3" id="btn-test5" data-color="#ffba00">Yellow</button>
<button class="btn select3" id="btn-test5" data-color="#ff006c">Pink</button>

我上面更新的内容只是在按钮上添加了一个类名，就像svg的id一样，如果svg id是id="select1"，那么相应的按钮会有class="btn select1"。

和js代码更新：

var clickedPath = '';

$('#select1,#select2,#select3').on("click", function () {
    clickedPath = $(this);
    $('.btn').prop('disabled', false); // enable all buttons
    $('.btn').not('.' + clickedPath.attr('id')).prop('disabled', true); // enable the corresponding buttons.
    clickedPath.css({
        stroke: "#00ff00"
    });
});

$('.btn').on('click', function () {
    clickedPath.css({
        fill: $(this).attr('data-color')
    });
});

＆＃13;

var clickedPath = '';

$('#select1,#select2,#select3').on("click", function() {
  clickedPath = $(this);
  $('.btn').prop('disabled', false);
  $('.btn').not('.' + clickedPath.attr('id')).prop('disabled', true);
  clickedPath.css({
    stroke: "#00ff00"
  });
});

$('.btn').on('click', function() {
  clickedPath.css({
    fill: $(this).attr('data-color')
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select SVG and Apply Color
<br/>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="yellow" id="select1" />
</svg>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" id="select2" />
</svg>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="red" id="select3" />
</svg>
<br clear='all'/>
<br/>Apply to Only 1st SVG / For 2nd and 3rd should not be Apply, Alert Box Should Come
<button class="btn select1" id="btn-test1" data-color="#ff0000">Red</button>
<button class="btn select1" id="btn-test2" data-color="#00ff00">Green</button>
<br/>
<br/>Apply to Only 2nd SVG / For 1st and 3rd should not be Apply, Apply Alert Box Should Come
<button class="btn select2" id="btn-test3" data-color="#0000ff">Blue</button>
<button class="btn select2" id="btn-test4" data-color="#ff9300">Orange</button>
<br/>
<br/>Apply to Only 3rd SVG / For 3rd and 1st should not be Apply, Apply Alert Box Should Come
<button class="btn select3" id="btn-test5" data-color="#ffba00">Yellow</button>
<button class="btn select3" id="btn-test5" data-color="#ff006c">Pink</button>

＆＃13;

为不同的SVG应用不同的颜色

2 个答案: