SVG linearGradient DOM 更改仅适用于 Chrome

Question

我正在尝试使用 jquery 更改 svg linearGradient 的颜色，但我的代码仅适用于 Chrome。

任何人都可以在这里帮助我使其跨浏览器吗？

$(document).ready(function() {

          $(".input-holder:first .form-control").focusout(function(e) {
            var colorValue = $(this).val();
			var s = "#" + colorValue;
			var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
			var matches = patt.exec(s);
			var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+")";
			
			$(this).next(".color-rgba").html(rgb);
			var getColor = $("lineargradient#grad1 stop:first").css('stop-color');
			//alert(getColor);
			$("lineargradient#grad1 stop:first").css('stopColor',rgb);
        });
		$(".input-holder:eq(1) .form-control").focusout(function(e) {
            var colorValue = $(this).val();
			var s = "#" + colorValue;
			var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
			var matches = patt.exec(s);
			var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+")";
			
			$(this).next(".color-rgba").html(rgb);
			$("lineargradient#grad1 stop:eq(1)").css('stopColor',rgb);
			//$("lineargradient#grad1 stop:eq(1)").css('-moz-stop-color',rgb);
        });
			
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
            	<div class="input-holder">
                	<label>First Gradient Color</label>
                    <input type="text" class="form-control">
                    <em class="color-rgba"></em>
                </div>
                <div class="input-holder">
                	<label>Second Gradient Color</label>
                    <input type="text" class="form-control">
                    <em class="color-rgba"></em>
                </div>
                
                <svg height="150" width="400">
				  <defs>
					<linearGradient id="grad1" x1="0%" y1="0%" x2="70%" y2="0%">
					    <stop id="stp1" class="stop1" offset="50%" style="" />
					  <stop offset="100%" style="stop-color:rgb(13,93,0);stop-opacity:1" />
					</linearGradient>
				  </defs>
				  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
				  Sorry, your browser does not support inline SVG.
				</svg>
            </div>

Answer 1

SVG 区分大小写，因此它的线性渐变而不是线性渐变。换句话说，您应该需要这个：

$("linearGradient#grad1 stop:eq(1)").css('stopColor',rgb);

很遗憾，这在 Chrome 上不起作用，因为 Chrome 错误地要求元素名称小写。

Chrome 通常的解决方法是给所有的 linearGradientElements 一个 linearGradient 类，然后按类而不是按元素名称进行选择。在你的情况下，因为你已经给渐变一个 id，你可以使用它。

$(document).ready(function() {

          $(".input-holder:first .form-control").focusout(function(e) {
            var colorValue = $(this).val();
			var s = "#" + colorValue;
			var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
			var matches = patt.exec(s);
			var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+")";
			
			$(this).next(".color-rgba").html(rgb);
			var getColor = $("#grad1 stop:first").css('stop-color');
			//alert(getColor);
			$("#grad1 stop:first").css('stopColor',rgb);
        });
		$(".input-holder:eq(1) .form-control").focusout(function(e) {
            var colorValue = $(this).val();
			var s = "#" + colorValue;
			var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
			var matches = patt.exec(s);
			var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+")";
			
			$(this).next(".color-rgba").html(rgb);
			$("#grad1 stop:eq(1)").css('stopColor',rgb);
			//$("#grad1 stop:eq(1)").css('-moz-stop-color',rgb);
        });
			
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
            	<div class="input-holder">
                	<label>First Gradient Color</label>
                    <input type="text" class="form-control">
                    <em class="color-rgba"></em>
                </div>
                <div class="input-holder">
                	<label>Second Gradient Color</label>
                    <input type="text" class="form-control">
                    <em class="color-rgba"></em>
                </div>
                
                <svg height="150" width="400">
				  <defs>
					<linearGradient id="grad1" class="linearGradient" x1="0%" y1="0%" x2="70%" y2="0%">
					    <stop id="stp1" class="stop1" offset="50%" style="" />
					  <stop offset="100%" style="stop-color:rgb(13,93,0);stop-opacity:1" />
					</linearGradient>
				  </defs>
				  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
				  Sorry, your browser does not support inline SVG.
				</svg>
            </div>