SVG linearGradient DOM更改仅适用于Chrome [英] SVG linearGradient DOM changes only working on Chrome

问题描述

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

I am trying to change the colors of an svg linearGradient using jquery but my code only works on Chrome.

有人可以在这里帮助我使其跨浏览器吗?

Can any one help me out here to make it cross browser?

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

推荐答案

SVG区分大小写，因此其linearGradient而不是lineargradient.换句话说，您应该需要这个:

SVG is case sensitive so its linearGradient and not lineargradient. In other words you should need this:

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

不幸的是，这不适用于Chrome，因为Chrome错误地要求元素名称使用小写字母.

Unfortunately this won't work on Chrome as Chrome incorrectly requires element names to be lowercased.

Chrome的通常解决方法是为所有linearGradientElements提供一个linearGradient类，然后按类而不是按元素名称进行选择.在您的情况下，由于您已为渐变指定了ID，因此可以使用它.

The usual workaround for Chrome is to give all the linearGradientElements a class of linearGradient and then select by class rather than by element name. In your case since you've given the gradient an id, you could just use that.

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

这篇关于SVG linearGradient DOM更改仅适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！