SVG Jquery заливка не работает, хотя стиль удален из пути SVG - PullRequest
0 голосов
/ 25 марта 2020

Итак, ниже находится оригинальный путь. Основываясь на ответах SO, я удалил файл из пути, а затем сделал следующее: Вот исходный путь:

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

1 Ответ

0 голосов
/ 25 марта 2020

Мне кажется, что все в порядке.

Я упростил путь для этого примера, просто чтобы уменьшить его.

$("#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 для изменения цвета при наведении, вам нужно будет удалить значение gfill из атрибута style="" в SVG. Значения в атрибуте style имеют более высокий приоритет, чем правила CSS, поэтому CSS не будет иметь никакого эффекта.

Это также означает, что вы не можете использовать функцию jQuery .css(), потому что это также устанавливает атрибут style. Вам нужно создать обработчик Javascript mouseover, чтобы изменить цвет. Или, в качестве альтернативы, используйте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...