title: How is works toggleClass with SVG?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $('#myid').click(function(){
  $(this).toggleClass('open');
  $('.myclass').find('svg.adcl').toggleClass('test');  
  
  });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.IconNav-img{font-size:30px;width:3em;}
  .test{width:10em!important;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="myid" class="some"&gt;
   &lt;div class="myclass"&gt;
   
  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="adcl IconNav-img mb-1"&gt;&lt;title&gt;1clr-code-review&lt;/title&gt;&lt;path d="M53 14H36.54l-3.11-4.66A3 3 0 0 0 30.93 8H11a3 3 0 0 0-3 3v34a3 3 0 0 0 3 3h21v5a3 3 0 0 0 3 3h8.06a1 1 0 0 1 .77.36l2.63 3.16a2 2 0 0 0 1.53.72 2 2 0 0 0 .69-.12A2 2 0 0 0 50 58.24V48h3a3 3 0 0 0 3-3V17a3 3 0 0 0-3-3zm-21.24-3.55L34.13 14h-5.06a1 1 0 0 1-.83-.45L25.87 10h5.06a1 1 0 0 1 .83.45zM10 11a1 1 0 0 1 1-1h11.93a1 1 0 0 1 .83.45l2.81 4.22a3 3 0 0 0 2.5 1.33H53a1 1 0 0 1 1 1v4H10zm38 47.24l-2.63-3.16A3 3 0 0 0 43.06 54H35a1 1 0 0 1-1-1V43a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM53 46h-3v-3a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3v3H11a1 1 0 0 1-1-1V23h44v22a1 1 0 0 1-1 1z" fill="#23292f"&gt;&lt;/path&gt;&lt;path d="M21 29h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2zM27 31h12a1 1 0 0 0 0-2H27a1 1 0 0 0 0 2zM49 29h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zM34 34h-7a1 1 0 0 0 0 2h7a1 1 0 0 0 0-2zM49 34H38a1 1 0 0 0 0 2h11a1 1 0 0 0 0-2zM43.29 45.29L40 48.59l-1.29-1.29a1 1 0 0 0-1.41 1.41l2 2a1 1 0 0 0 1.41 0l4-4a1 1 0 0 0-1.41-1.41z" fill="#23292f"&gt;&lt;/path&gt;&lt;circle cx="13" cy="13" r="1" fill="#23292f"&gt;&lt;/circle&gt;&lt;circle cx="17" cy="13" r="1" fill="#23292f"&gt;&lt;/circle&gt;&lt;circle cx="21" cy="13" r="1" fill="#23292f"&gt;&lt;/circle&gt;&lt;/svg&gt;
  
  
   &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="IconNav-img mb-1"&gt;&lt;title&gt;1clr-social-coding&lt;/title&gt;&lt;path d="M25.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 14 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM19 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM45.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 34 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM39 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM33.33 14a1 1 0 0 0-1.19.76l-2.22 10a1 1 0 0 0 .75 1.24h.22a1 1 0 0 0 1-.78l2.22-10a1 1 0 0 0-.78-1.22zM24.7 16.29a1 1 0 0 0-1.41 0l-3 3a1 1 0 0 0 0 1.4l3 3a1 1 0 1 0 1.42-1.4L22.45 20l2.27-2.3a1 1 0 0 0-.02-1.41zM40.71 16.3a1 1 0 1 0-1.42 1.4l2.26 2.3-2.27 2.3a1 1 0 1 0 1.42 1.4l3-3a1 1 0 0 0 0-1.4z" fill="#23292f"&gt;&lt;/path&gt;&lt;path d="M53 8H11a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h7.59l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71h13.18l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71H53a3 3 0 0 0 3-3V11a3 3 0 0 0-3-3zm1 21a1 1 0 0 1-1 1h-8a1 1 0 0 0-.71.29L42 32.59l-2.29-2.29A1 1 0 0 0 39 30H25a1 1 0 0 0-.71.29L22 32.59l-2.29-2.29A1 1 0 0 0 19 30h-8a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h42a1 1 0 0 1 1 1z" fill="#23292f"&gt;&lt;/path&gt;&lt;/svg&gt;
    Title
    &lt;/div&gt; 
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When clicking myid, the test class will be toggle with SVG.
  How is work toggleClass with SVG?</p>