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

Apply Different Color for Different SVG

本文关键字：颜色应用 SVG 更新时间：2023-09-26

我有一些svg，我想应用颜色的条件，我在jsfiddle链接中写了详细信息

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

http://jsfiddle.net/6w21z1bq/

检查FIDDLE上的更新代码.对SVG标记进行了更改，并将数据索引属性应用于圆和按钮。若选定的圆dta索引属性和单击的按钮数据索引属性相同，则它将应用颜色else显示警报。

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

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

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

我上面更新的只是向按钮添加了一个与svg-like的id相同的类名，如果svg-id是class="btn select1"，那么相应的按钮将具有CCD_3。

和更新的js代码：

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>

PD_7