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

Question

我有一些 svg 我想有条件地应用颜色，我在 jsfiddle 链接中写了详细说明

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

http://jsfiddle.net/6w21z1bq/

Answer 1

检查FIDDLE上的更新代码 .已更改 SVG 标签并将 data-index 属性应用于圆圈和按钮。如果选定的圆形数据索引属性与单击按钮数据索引属性相同，则它将应用颜色，否则显示警报。

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");
    }
});

<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>

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')
    });
});

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')
  });
});

<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>