为类创建样式，并为其他类移除该样式

Question

我想在<svg>中为一个<text>创建一个css类，并为所有拥有相同类的<text>删除这个类，如下所示：

  $('.svg-text').on('click', function () {
      var id = $(this).attr('rel'); 
       $(this).addClass("svg-style").siblings(".svg-text").removeClass("svg-style");
    });

THis是<svg>中<text>标签的一个例子：

<g id="Group-4" transform="translate(13.000000, 336.000000)">
    <text rel="text-2"  class="svg-text" id="Publication-des-résu" font-family="Roboto-Bold, Roboto" font-size="12" font-weight="bold" line-spacing="16" fill="#191919">
        <tspan x="25" y="11">PUBLICATION DES RÉSULTATS DE TEST</tspan>
    </text>
    <g id="Group-9-Copy-6">
        <circle id="Oval" stroke="#B5004F" stroke-width="1.5" cx="7.42857143" cy="7.42857143" r="7.42857143"></circle>
        <g id="info" transform="translate(5.714286, 3.428571)" fill="#B5004F" fill-rule="nonzero">
            <path d="M3.28882286,6.82532571 L3.18192,7.26233143 C2.86121143,7.38891429 2.60502857,7.48525714 2.41426286,7.55149714 C2.22329143,7.61794286 2.00139429,7.65099429 1.74857143,7.65099429 C1.36032,7.65099429 1.05833143,7.55588571 0.842948571,7.36697143 C0.627565714,7.17730286 0.51984,6.93696 0.51984,6.64539429 C0.51984,6.53252571 0.527657143,6.41643429 0.543908571,6.29814857 C0.560297143,6.17972571 0.586354286,6.04635429 0.622011429,5.89728 L1.02281143,4.47867429 C1.05846857,4.34283429 1.08877714,4.21412571 1.11305143,4.09241143 C1.13766857,3.97145143 1.14953143,3.86016 1.14953143,3.75997714 C1.14953143,3.57881143 1.11202286,3.45209143 1.03734857,3.38084571 C0.962674286,3.30980571 0.820182857,3.27373714 0.60864,3.27373714 C0.505028571,3.27373714 0.398537143,3.29033143 0.289988571,3.32242286 C0.18096,3.35465143 0.0877714286,3.38578286 0.00953142857,3.41472 L0.116708571,2.97737143 C0.379268571,2.87046857 0.63024,2.77892571 0.870308571,2.70294857 C1.11037714,2.62676571 1.33721143,2.58864 1.55177143,2.58864 C1.93734857,2.58864 2.23488,2.68182857 2.44381714,2.86820571 C2.65275429,3.05472 2.75718857,3.29650286 2.75718857,3.59444571 C2.75718857,3.65609143 2.75033143,3.76470857 2.73558857,3.91995429 C2.72118857,4.07554286 2.69437714,4.21810286 2.65529143,4.34777143 L2.25620571,5.76068571 C2.22349714,5.87417143 2.19408,6.00390857 2.16850286,6.14989714 C2.14210286,6.29492571 2.12948571,6.40573714 2.12948571,6.48006857 C2.12948571,6.66768 2.17131429,6.79577143 2.25517714,6.86386286 C2.33965714,6.93195429 2.48516571,6.96582857 2.69184,6.96582857 C2.78886857,6.96582857 2.89926857,6.94861714 3.02194286,6.91481143 C3.14427429,6.88100571 3.23348571,6.85131429 3.28882286,6.82532571 Z M3.39003429,0.893485714 C3.39003429,1.13965714 3.29725714,1.34989714 3.11081143,1.52276571 C2.92484571,1.69625143 2.70075429,1.78306286 2.43860571,1.78306286 C2.17563429,1.78306286 1.95099429,1.69625143 1.76290286,1.52276571 C1.57515429,1.34982857 1.48107429,1.13965714 1.48107429,0.893485714 C1.48107429,0.647794286 1.57515429,0.437211429 1.76290286,0.262148571 C1.95065143,0.08736 2.17570286,0 2.43860571,0 C2.70068571,0 2.92484571,0.0875657143 3.11081143,0.262148571 C3.29739429,0.437211429 3.39003429,0.647862857 3.39003429,0.893485714 Z" id="Shape"></path>
        </g>
    </g>
</g>
<g id="Group-5" transform="translate(13.000000, 367.000000)">
    <text rel="text-3"  class="svg-text" id="Vérification-de-la-c" font-family="Roboto-Bold, Roboto" font-size="12" font-weight="bold" line-spacing="16" fill="#191919">
        <tspan x="25" y="11">VÉRIFICATION DE LA CONFORMITÉ</tspan>
    </text>
    <g id="Group-9-Copy-7">
        <circle id="Oval" stroke="#B5004F" stroke-width="1.5" cx="7.42857143" cy="7.42857143" r="7.42857143"></circle>
        <g id="info" transform="translate(5.714286, 3.428571)" fill="#B5004F" fill-rule="nonzero">
            <path d="M3.28882286,6.82532571 L3.18192,7.26233143 C2.86121143,7.38891429 2.60502857,7.48525714 2.41426286,7.55149714 C2.22329143,7.61794286 2.00139429,7.65099429 1.74857143,7.65099429 C1.36032,7.65099429 1.05833143,7.55588571 0.842948571,7.36697143 C0.627565714,7.17730286 0.51984,6.93696 0.51984,6.64539429 C0.51984,6.53252571 0.527657143,6.41643429 0.543908571,6.29814857 C0.560297143,6.17972571 0.586354286,6.04635429 0.622011429,5.89728 L1.02281143,4.47867429 C1.05846857,4.34283429 1.08877714,4.21412571 1.11305143,4.09241143 C1.13766857,3.97145143 1.14953143,3.86016 1.14953143,3.75997714 C1.14953143,3.57881143 1.11202286,3.45209143 1.03734857,3.38084571 C0.962674286,3.30980571 0.820182857,3.27373714 0.60864,3.27373714 C0.505028571,3.27373714 0.398537143,3.29033143 0.289988571,3.32242286 C0.18096,3.35465143 0.0877714286,3.38578286 0.00953142857,3.41472 L0.116708571,2.97737143 C0.379268571,2.87046857 0.63024,2.77892571 0.870308571,2.70294857 C1.11037714,2.62676571 1.33721143,2.58864 1.55177143,2.58864 C1.93734857,2.58864 2.23488,2.68182857 2.44381714,2.86820571 C2.65275429,3.05472 2.75718857,3.29650286 2.75718857,3.59444571 C2.75718857,3.65609143 2.75033143,3.76470857 2.73558857,3.91995429 C2.72118857,4.07554286 2.69437714,4.21810286 2.65529143,4.34777143 L2.25620571,5.76068571 C2.22349714,5.87417143 2.19408,6.00390857 2.16850286,6.14989714 C2.14210286,6.29492571 2.12948571,6.40573714 2.12948571,6.48006857 C2.12948571,6.66768 2.17131429,6.79577143 2.25517714,6.86386286 C2.33965714,6.93195429 2.48516571,6.96582857 2.69184,6.96582857 C2.78886857,6.96582857 2.89926857,6.94861714 3.02194286,6.91481143 C3.14427429,6.88100571 3.23348571,6.85131429 3.28882286,6.82532571 Z M3.39003429,0.893485714 C3.39003429,1.13965714 3.29725714,1.34989714 3.11081143,1.52276571 C2.92484571,1.69625143 2.70075429,1.78306286 2.43860571,1.78306286 C2.17563429,1.78306286 1.95099429,1.69625143 1.76290286,1.52276571 C1.57515429,1.34982857 1.48107429,1.13965714 1.48107429,0.893485714 C1.48107429,0.647794286 1.57515429,0.437211429 1.76290286,0.262148571 C1.95065143,0.08736 2.17570286,0 2.43860571,0 C2.70068571,0 2.92484571,0.0875657143 3.11081143,0.262148571 C3.29739429,0.437211429 3.39003429,0.647862857 3.39003429,0.893485714 Z" id="Shape"></path>
        </g>
    </g>
</g>

Answer 1

如果您将其用作onlclick函数，您将首先清除s中具有svg-text类的所有svg样式(如果有的话)，然后将svg样式添加到单击的文本中。

  var elements = document.getElementsByClassName("svg-text svg-style");
  if (elements){
    for (i=0;i<elements.length;i++) {
      elements[i].classList.remove("svg-style");
    }
  }
  this.classList.add("svg-style");

Answer 2

​

$('.svg-text').on('click', function() {
  //on every click
  var id = $(this).attr('rel');
  $("text.svg-text").removeClass("svg-style");
  // first remove class from every text with class .svg-text
  $(this).addClass("svg-style");
  // then re-apply on only clicked one
});

.svg-text {
  background-color: red
}

.svg-style {
  background-color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<g id="Group-4" transform="translate(13.000000, 336.000000)">
  <text rel="text-2" class="svg-text" id="Publication-des-résu" font-family="Roboto-Bold, Roboto" font-size="12" font-weight="bold" line-spacing="16" fill="#191919">
        <tspan x="25" y="11">PUBLICATION DES RÉSULTATS DE TEST</tspan>
    </text>
  <g id="Group-9-Copy-6">
    <circle id="Oval" stroke="#B5004F" stroke-width="1.5" cx="7.42857143" cy="7.42857143" r="7.42857143"></circle>
    <g id="info" transform="translate(5.714286, 3.428571)" fill="#B5004F" fill-rule="nonzero">
      <path d="M3.28882286,6.82532571 L3.18192,7.26233143 C2.86121143,7.38891429 2.60502857,7.48525714 2.41426286,7.55149714 C2.22329143,7.61794286 2.00139429,7.65099429 1.74857143,7.65099429 C1.36032,7.65099429 1.05833143,7.55588571 0.842948571,7.36697143 C0.627565714,7.17730286 0.51984,6.93696 0.51984,6.64539429 C0.51984,6.53252571 0.527657143,6.41643429 0.543908571,6.29814857 C0.560297143,6.17972571 0.586354286,6.04635429 0.622011429,5.89728 L1.02281143,4.47867429 C1.05846857,4.34283429 1.08877714,4.21412571 1.11305143,4.09241143 C1.13766857,3.97145143 1.14953143,3.86016 1.14953143,3.75997714 C1.14953143,3.57881143 1.11202286,3.45209143 1.03734857,3.38084571 C0.962674286,3.30980571 0.820182857,3.27373714 0.60864,3.27373714 C0.505028571,3.27373714 0.398537143,3.29033143 0.289988571,3.32242286 C0.18096,3.35465143 0.0877714286,3.38578286 0.00953142857,3.41472 L0.116708571,2.97737143 C0.379268571,2.87046857 0.63024,2.77892571 0.870308571,2.70294857 C1.11037714,2.62676571 1.33721143,2.58864 1.55177143,2.58864 C1.93734857,2.58864 2.23488,2.68182857 2.44381714,2.86820571 C2.65275429,3.05472 2.75718857,3.29650286 2.75718857,3.59444571 C2.75718857,3.65609143 2.75033143,3.76470857 2.73558857,3.91995429 C2.72118857,4.07554286 2.69437714,4.21810286 2.65529143,4.34777143 L2.25620571,5.76068571 C2.22349714,5.87417143 2.19408,6.00390857 2.16850286,6.14989714 C2.14210286,6.29492571 2.12948571,6.40573714 2.12948571,6.48006857 C2.12948571,6.66768 2.17131429,6.79577143 2.25517714,6.86386286 C2.33965714,6.93195429 2.48516571,6.96582857 2.69184,6.96582857 C2.78886857,6.96582857 2.89926857,6.94861714 3.02194286,6.91481143 C3.14427429,6.88100571 3.23348571,6.85131429 3.28882286,6.82532571 Z M3.39003429,0.893485714 C3.39003429,1.13965714 3.29725714,1.34989714 3.11081143,1.52276571 C2.92484571,1.69625143 2.70075429,1.78306286 2.43860571,1.78306286 C2.17563429,1.78306286 1.95099429,1.69625143 1.76290286,1.52276571 C1.57515429,1.34982857 1.48107429,1.13965714 1.48107429,0.893485714 C1.48107429,0.647794286 1.57515429,0.437211429 1.76290286,0.262148571 C1.95065143,0.08736 2.17570286,0 2.43860571,0 C2.70068571,0 2.92484571,0.0875657143 3.11081143,0.262148571 C3.29739429,0.437211429 3.39003429,0.647862857 3.39003429,0.893485714 Z"
        id="Shape"></path>
    </g>
  </g>
</g>
<g id="Group-5" transform="translate(13.000000, 367.000000)">
  <text rel="text-3" class="svg-text" id="Vérification-de-la-c" font-family="Roboto-Bold, Roboto" font-size="12" font-weight="bold" line-spacing="16" fill="#191919">
        <tspan x="25" y="11">VÉRIFICATION DE LA CONFORMITÉ</tspan>
    </text>
  <g id="Group-9-Copy-7">
    <circle id="Oval" stroke="#B5004F" stroke-width="1.5" cx="7.42857143" cy="7.42857143" r="7.42857143"></circle>
    <g id="info" transform="translate(5.714286, 3.428571)" fill="#B5004F" fill-rule="nonzero">
      <path d="M3.28882286,6.82532571 L3.18192,7.26233143 C2.86121143,7.38891429 2.60502857,7.48525714 2.41426286,7.55149714 C2.22329143,7.61794286 2.00139429,7.65099429 1.74857143,7.65099429 C1.36032,7.65099429 1.05833143,7.55588571 0.842948571,7.36697143 C0.627565714,7.17730286 0.51984,6.93696 0.51984,6.64539429 C0.51984,6.53252571 0.527657143,6.41643429 0.543908571,6.29814857 C0.560297143,6.17972571 0.586354286,6.04635429 0.622011429,5.89728 L1.02281143,4.47867429 C1.05846857,4.34283429 1.08877714,4.21412571 1.11305143,4.09241143 C1.13766857,3.97145143 1.14953143,3.86016 1.14953143,3.75997714 C1.14953143,3.57881143 1.11202286,3.45209143 1.03734857,3.38084571 C0.962674286,3.30980571 0.820182857,3.27373714 0.60864,3.27373714 C0.505028571,3.27373714 0.398537143,3.29033143 0.289988571,3.32242286 C0.18096,3.35465143 0.0877714286,3.38578286 0.00953142857,3.41472 L0.116708571,2.97737143 C0.379268571,2.87046857 0.63024,2.77892571 0.870308571,2.70294857 C1.11037714,2.62676571 1.33721143,2.58864 1.55177143,2.58864 C1.93734857,2.58864 2.23488,2.68182857 2.44381714,2.86820571 C2.65275429,3.05472 2.75718857,3.29650286 2.75718857,3.59444571 C2.75718857,3.65609143 2.75033143,3.76470857 2.73558857,3.91995429 C2.72118857,4.07554286 2.69437714,4.21810286 2.65529143,4.34777143 L2.25620571,5.76068571 C2.22349714,5.87417143 2.19408,6.00390857 2.16850286,6.14989714 C2.14210286,6.29492571 2.12948571,6.40573714 2.12948571,6.48006857 C2.12948571,6.66768 2.17131429,6.79577143 2.25517714,6.86386286 C2.33965714,6.93195429 2.48516571,6.96582857 2.69184,6.96582857 C2.78886857,6.96582857 2.89926857,6.94861714 3.02194286,6.91481143 C3.14427429,6.88100571 3.23348571,6.85131429 3.28882286,6.82532571 Z M3.39003429,0.893485714 C3.39003429,1.13965714 3.29725714,1.34989714 3.11081143,1.52276571 C2.92484571,1.69625143 2.70075429,1.78306286 2.43860571,1.78306286 C2.17563429,1.78306286 1.95099429,1.69625143 1.76290286,1.52276571 C1.57515429,1.34982857 1.48107429,1.13965714 1.48107429,0.893485714 C1.48107429,0.647794286 1.57515429,0.437211429 1.76290286,0.262148571 C1.95065143,0.08736 2.17570286,0 2.43860571,0 C2.70068571,0 2.92484571,0.0875657143 3.11081143,0.262148571 C3.29739429,0.437211429 3.39003429,0.647862857 3.39003429,0.893485714 Z"
        id="Shape"></path>
    </g>
  </g>
</g>

​