javascript - 即使从 svg 路径中​​删除了样式，SVG Jquery 填充也不起作用

Question

所以下面是原始路径。根据对 SO 的响应，我从路径中删除了 syle，然后执行了以下操作：这是原始路径：

  <path
 onclick=""
 onmouseover=""
 style="stroke:#000000;stroke-opacity:1;fill:#9cc0e7;fill-opacity:1"
 d="m 30.172,354.32358 0.616,0.71129 -0.43,0.49065 -1.012,-0.69215 z m -10.275,-0.41106 0.209,0.32744 -1.297,0.95813 0.18,-0.91985 z m 18.259,-2.62352 0.378,0.57427 -1.448,0.4161 0.151,-0.64379 z m -30.371,-16.4091 1.128,0.39292 0.058,0.57125 -0.89,0.24079 0.035,0.36069 -0.75,-0.59644 0.622,-0.2287 z m 0.645,-1.3843 0.605,0.46344 -0.012,0.60349 -0.832,-0.5652 -0.204,-0.4564 0.443,-0.0453 z m -2.432,-2.42404 0.461,0.55916 -0.233,1.21302 -0.535,-0.34355 0.076,-0.81305 -0.843,0.76267 -0.186,-0.27303 z m 0.194,-2.66282 -0.018,0.81406 -1.064,1.22612 0.105,-1.13141 z m -0.542,-0.64177 0.215,0.54606 -0.546,0.33046 -0.122,-0.68006 z m -2.046,-4.12873 0.826,0.46446 0.593,-0.22971 -0.75,3.21895 -1.582,1.62812 -0.849,-0.19646 0.384,-0.19042 -0.407,-0.39494 -0.651,0.2549 0.169,0.35665 -0.60400002,0.0192 0.099,-0.38789 L 0.244,328.4158 0,327.77906 l 0.384,-0.53297 1.36,-0.0453 1.256,-1.69864 0.604,-1.86387 z m -0.816,0.14307 0.101,1.47901 -0.926,0.66595 -0.006,-1.94951 z m 3.706,-0.73547 0.425,1.75002 -1.663,0.3496 0.401,-0.79491 -0.181,-0.74454 z m -2.33,-0.72641 0.573,0.0151 0.292,1.1818 -1.24,-0.0836 -0.146,-0.52491 0.521,-0.58838 z m 1.187,-1.66438 0.003,1.48605 -1.355,-0.14105 -0.57,0.70122 0.06,-1.13645 z m 1.897,-0.0554 0.468,0.47655 0.559,0.13803 -1.35,1.24526 -0.547,-0.22366 0.057,-0.49871 0.92,-0.68006 z m -1.056,-1.2634 0.762,1.56767 -1.57,1.74095 0.531,-1.89913 -0.271,-0.37781 -0.58,0.22467 0.413,-0.98735 z m -1.088,-0.0635 -0.419,1.38934 -1.367,0.77174 -0.15,1.87898 -0.349,0.28009 -0.36,-0.40099 -0.797,0.72641 0.023,2.31623 -0.593,0.24886 -0.959,-1.14654 0.873,-1.00447 -0.448,-1.36919 0.454,-0.0312 0.889,-1.80946 1.204,-0.0635 0.529,-1.37624 0.756,0.28009 0.714,-0.69014 z m 56.039,-15.77438 3.99,1.68554 1.115,-1.05182 0.671,0.72741 2.203,-1.20396 2.686,0.0736 0.941,0.86342 2.877,-0.8604 0.268,1.12336 0.976,0.40703 0.379,-1.63819 0.913,0.18034 0.504,0.93697 2.267,-1.82457 0.686,0.2025 -0.007,1.02261 1.685,0.88257 0.947,0.0443 0.405,-0.46849 1.781,0.55413 0.811,-0.21359 -0.582,0.72136 -0.979,-0.30325 -0.592,0.4574 0.924,0.96216 1.315,-0.32441 v 0 l 0.594,1.19791 1.176,-0.0866 v 0 l -0.122,1.0085 0.586,1.23015 0.901,-0.0635 -0.15,-0.93093 0.922,-1.3037 0.919,0.7919 2.276,0.35262 -0.079,0.87451 0.818,1.33594 2.838,-0.10478 1.168,0.90876 1.414,-0.86645 -0.588998,-0.45438 0.774998,-2.00189 0.261,-0.27203 0.801,0.39595 0.907,-0.68006 0.292,1.57673 -0.489,0.73447 1.78,1.0085 0.858,-0.56924 0.429,0.24684 -0.427,0.70122 -0.379,-0.21561 -0.258,0.96821 -0.747,-0.1471 -1.304,2.82704 0.659,1.06593 2.295,0.92791 -0.521,1.07399 0.982,0.93596 0.946,-0.38284 0.868,-1.06392 0.056,-0.95108 0.802,-0.30023 -0.081,0.92286 0.924,0.84832 -0.182,1.39034 0.411,1.36415 -1.31,1.58681 0.012,1.7067 0.277,0.47655 0.933,-0.29016 1.231,1.61199 0.612,0.12896 0.104,1.98175 1.335,-0.88257 1.748,0.74253 -0.495,1.71274 0.446,1.00448 -0.537,1.1828 0.428,0.27303 1.067,-0.3496 0.459,0.98634 0.808,-1.04981 0.384,0.54807 1.027,-0.27706 1.301,2.50363 0.934,-0.0987 0.176,-0.73346 0.497,-0.0826 0.414,0.90271 0.876,0.1209 0.248,0.82816 1.197,0.007 0.672,0.60147 -0.141,2.06739 1.172,0.60752 0.513,-0.90776 0.806,0.0867 0.882,1.5858 -0.118,0.54002 0.842,0.73648 v 0 l 1.005,1.88301 -0.61,0.3496 0.427,0.72036 0.803,0.76771 1.069,-0.56117 0.574,1.48908 -1.587,2.90965 -0.396,1.98174 -2.487,-0.0282 -2.346,2.89253 -1.812,-0.75965 -0.672,0.96518 0.173,0.39897 0.886,-0.40099 -0.15,0.97324 0.528,-0.0504 0.412,1.06694 0.445,-0.81406 0.353,0.55715 0.536,-0.27203 0.087,-0.76569 0.289,0.92387 1.034,0.0917 0.841,0.87552 -0.758,-0.12594 -0.648,0.94201 -0.424,-0.20654 -0.329,1.03571 -1.189,-0.23475 -0.467,-0.89163 -0.837,0.25893 -0.269,1.68856 0.679,0.95309 -0.331,0.49267 0.984,0.20351 0.157,2.60841 0.511,-0.17631 0.545,0.42819 -1.738,1.60897 1.175,0.65689 -0.164,0.73245 v 0 l -7.023,2.95398 0.721,0.73749 -0.288,0.62767 1.364,1.41251 -0.225,1.24526 -2.052,0.45136 0.772,0.60349 0.76,2.3112 4.375,-1.43669 2.44,-0.002 0.459,0.63875 0.624,-0.42416 0.67,0.32643 0.745,-0.66696 0.479,0.54203 -0.019,1.02362 -1.634,0.74051 -0.432,-0.37681 -0.135,0.46345 -1.961,-0.10175 -0.417,0.3496 -0.875,-0.76368 -0.39,1.40646 -1.671,0.61659 -0.332,-0.23173 -0.091,2.36057 -1.183,0.78988 -1.253,-0.11284 -0.201,2.14899 -1.694,0.1078 -0.104,0.64883 -1.159,-0.31232 -0.94,0.43826 -0.486,-0.97627 -0.521,0.18437 1.5,1.33796 1.939,-0.12795 -0.218,1.31579 0.684,1.01253 0.688,-0.27303 0.182,0.59644 1.885,0.28915 -0.239,0.96619 1.048,2.2447 0.093,2.19433 -0.6,0.42114 -0.739,-0.13702 -0.46,0.79088 -0.857,0.0111 0.475,0.59946 -0.148,1.15057 -1.886,1.08406 -0.988,-0.24683 -0.634,0.35867 -0.71,-0.37882 -0.617,-1.27852 -1.442,-0.84126 -0.836,0.45741 -0.331,-1.42863 -0.605,0.15112 -0.288,1.0216 -0.779,0.49871 0.788,1.06392 0.847,0.25792 0.021,0.90272 0.396,0.0685 -1.486,2.81696 -0.804,0.54102 0.672,0.85235 0.136,3.26026 -1.164,0.30325 -0.141,-0.46244 -0.309,0.33248 -0.873,-0.19445 -0.462,1.28758 -1.523,0.61457 v 0 l -0.426,-0.39997 0.677,-0.89768 -0.385,-0.38587 -1.343,-0.2146 0.091,0.76267 -0.526,0.36069 -0.659,-0.38487 -0.231,0.38688 -0.117,-1.63617 0.704,-0.0514 1,-1.30471 0.433,0.0897 -0.366,-0.6861 -1.016,0.27303 -0.115,-1.24627 -0.345,0.75763 -0.846,0.0866 -0.132,0.71129 -0.509,-0.58636 0.014,0.5914 -0.629,-0.0262 -0.133,0.4564 -0.797,-0.48561 -0.448,0.32945 0.959,1.48303 v 0 l -2.008,-0.30124 -0.835,0.89466 0.015,0.91884 -0.697,-0.0856 -0.004,0.52491 -1.344,-0.25792 v 0 l 0.378,-3.47587 1.378,-1.76513 1.325,-2.89454 0.268,-1.94044 -2.21,-6.93762 0.035,-1.09112 -0.454,0.21862 -1.023,-2.55199 0.988,-0.39897 -1.366,-0.1622 0.326,-1.55457 -1.123,-0.27404 -0.168,1.51628 -0.663,0.27505 -0.186,-3.30358 -0.64,-1.54248 0.786,-2.03313 1.494,-1.87092 -1.082,0.69416 0.604,-1.95252 0.646,-0.26296 -0.454,-0.24382 -1.204,1.13948 -0.593,-1.35307 0.646,-1.45281 1.523,-0.78282 1.809,0.14407 1,-0.51281 -1.158,0.10578 -0.913,-0.59543 -4.158,0.56924 -0.634,-0.8332 0.692,-0.77678 0.616,-1.99485 -1.087,-0.7526 -0.325,-2.20944 0.948,-4.42492 0.715,-1.13243 1.373,-0.37076 2.233,0.99339 1.145,-1.64826 1.448,0.50274 0.512,-0.23878 0.256,-0.98735 -0.384,0.7123 -0.616,0.0867 -0.483,-0.8997 -1.919,1.16366 -1.343,-0.17026 -1.122,-1.04377 -1.948,0.93798 -0.082,-0.69215 -1.076,1.72987 0.14,-0.9007 -0.459,-0.0373 -0.745,-1.42057 -0.879,-0.41005 0.403,-0.8876 -0.692,-0.61055 -0.384,0.31535 0.698,0.48259 -0.443,0.85335 0.85,0.33953 0.058,1.59184 -0.354,0.62969 -0.908,-1.62308 0.122,1.49714 0.611,0.83723 -0.32,0.41408 -0.426,-0.75562 -0.254,1.32284 -0.413,-0.11989 -0.948,4.48034 -0.773,-2.65879 0.936,-0.5521 0.238,0.24482 0.035,-1.03067 -1.355,1.20698 -0.041,0.85436 -0.273,1.57068 0.68,1.09918 0.261,3.59475 0.867,2.5258 -1.732,4.27682 -2.035,2.42102 -0.355,1.08809 -0.686,-0.4443 0.442,0.60047 -0.32,0.68106 0.664,1.10624 -2,0.94906 -0.221,0.48763 0.064,-1.19893 -0.71,1.46088 -3.285,1.09817 -0.482,0.33751 0.209,0.43121 -1.919,0.39292 -3.129,1.58479 -1.063,0.0373 0.023,0.58032 -1.582,1.17776 -1.308,-0.0947 0.14,0.38083 -3.675,1.23419 -1.117,0.52994 -0.128,0.46647 h -1.221 l -0.285,0.46748 -2.442,-0.0937 -1.517,0.70021 v 0 L 55.854,392.798 v 0 0 0 l -0.2,-0.23273 0.47,-0.0121 0.002,-0.68207 0.554,0.008 0.049,-0.67603 -1.659,-0.59241 1.744,-0.77477 -0.278,-1.33493 -0.858,-0.56823 -1.569,0.2156 -0.615,-0.65386 -1.311,3.27739 -0.11,1.80845 v 0 l -1.239,-0.14407 -3.675,-1.85782 -7.105,-5.65609 -8.095,-9.55309 1.07,-1.11429 -0.552,-1.62308 -0.273,0.40703 -1.023,-0.14407 0.872,0.82615 -0.459,0.20654 0.599,0.48863 -0.396,0.72741 -9.902,-9.1118 -5.751,-6.67567 -0.448,-1.68756 1.018,-2.31825 1.732,-1.49311 0.373,0.18941 -0.866,0.8876 0.523,0.8322 2.623,-0.6307 0.215,0.49771 -0.971,2.016 1.564,1.24627 1.826,-0.75562 0.291,-0.87451 1.791,0.32038 1.378,-0.45941 0.809,-1.16568 -0.535,-1.09515 1.094,0.6982 0.238,1.11429 1.942,-0.0756 0.198,-0.78686 0.732,-0.0443 -0.023,-1.07097 -0.546,-0.17631 1.18,-0.5239 0.343,0.97728 0.314,-0.24583 0.796,0.94503 0.808,-1.22814 0.71,0.17027 1.275,-1.40748 0.55,0.29822 -0.098,-0.77678 1.807,-0.75562 0.547,0.36572 2.047,-0.10679 1.675,-2.52378 0.209,-1.61099 1.052,-0.54909 1.059,-2.57214 1.454,-1.40445 1.472,-3.25321 -1.175,0.29117 -0.75,0.72238 -0.308,1.87797 -0.82,0.40501 -2.303,-1.12033 -0.366,0.51987 -1.221,0.3224 -0.808,-0.41106 0.186,0.82211 -6.984,1.68252 -0.959,0.70122 -0.977,1.80644 -1.314,-0.57427 -0.884,0.15113 -0.971,-0.75865 -1.722,0.4302 -2.453,-1.25736 -3.303,-0.22164 -8.013,-5.21279 -1.157,-0.29722 -3.512,-3.04667 -0.146,-0.4312 1.826,-0.84429 -0.651,0.0766 -0.082,-1.83364 -0.646,-0.7798 -0.983,-0.12695 0.029,-0.74857 -0.517,-0.0443 -0.698,-1.02865 -0.285,-3.79927 0.244,-0.56017 0.419,0.0574 0.087,-0.82614 2.262,-1.54651 0.703,-1.15761 1.483,-0.80902 -0.424,-0.31837 -2.343,0.44531 -1.646,1.85279 -0.233,-1.54651 0.657,-0.24885 0.547,-1.03168 1.8959997,-0.85436 -0.8879997,0.0887 -0.52,-0.63674 -0.157,0.44633 -0.623,-0.0383 -0.45,-0.53599 0.197,-0.3627 4.238,0.0262 0.49,-7.63179 1.125,-0.32845 0.447,2.30113 0.833,0.28814 1.25,-1.85883 1.116,1.16769 1.934,-0.99339 2.236,0.77879 2.313,-0.9541 3.996,0.49871 2.083,-0.5249 2.594,2.36359 5.779,0.19948 1.228,-0.60752 1.25,-2.25176 9.542,-2.9842 0.774,0.45539 -0.832,1.2906 0.321,0.79089 -0.275,1.32989 1.696,0.62666 3.15,0.0554 1.85,-0.79089 -0.188,-0.77476 1.562,-1.27751 0.81,-0.32945 1.021,0.30527 1.771,-1.25433 -0.269,-0.67402 -2.325,-0.25187 0.156,-1.86287 -0.357,-0.42717 0.465,-2.05731 1.813,-1.15661 z"
 title="Gujarat"
 id="IN-GJ"/>

但是下面的方法不起作用。不确定我是否真的了解 SVG，因为我从网站下载了印度地图并尝试在 HTML 上对其进行操作以供以后使用。我什至不能使用 CSS 或 JQuery 让它在悬停时改变颜色。有人可以帮我弄这个吗？

$("#IN-GJ").css("fill","red");

标签： javascriptjquerycsssvg

Answer 1

对我来说似乎没问题。

我已经简化了这个例子的路径，只是为了让它更小。

$("#IN-GJ").css("fill","red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg>
  <path
    onclick=""
     onmouseover=""
     style="stroke:#000000;stroke-opacity:1;fill:#9cc0e7;fill-opacity:1"
     d="M 150,0 L 300,75 L 150,150 L 0,75 Z"
     title="Gujarat"
     id="IN-GJ"/>
 </svg>

如果您想使用 CSS 更改悬停时的颜色，则需要从SVG 中gfill的属性中删除该值。style=""属性中的值的style优先级高于 CSS 规则，因此 CSS 将不起作用。

这也意味着您不能使用 jQuery.css()函数，因为它也会设置style属性。您需要创建一个 Javascriptmouseover处理程序来更改颜色。或者像我在下面的示例中所做的那样，对所有内容都使用 CSS。

#IN-GJ {
  fill: red;
}

#IN-GJ:hover {
  fill: green;
}

<svg>
  <path
    onclick=""
     onmouseover=""
     style="stroke:#000000;stroke-opacity:1; fill-opacity:1"
     d="M 150,0 L 300,75 L 150,150 L 0,75 Z"
     title="Gujarat"
     id="IN-GJ"/>
 </svg>