title: How to restrict CSS style to apply to a particular SVG only?
body: <p>I have several SVGs that I would like to style using CSS. However, the styles seem to be applied across SVGs. </p>
  
  <p>Unfortunately, I cannot use classes on SVG elements or a iframe. </p>
  
  <p>Is there a way to apply styles to a particular SVG only?</p>
  
  <p>Here is an example where differenty styles are used within SVG but the second applies to the first aparently.</p>
  
  <pre><code>&lt;svg&gt;
    &lt;style&gt;
      line {
        stroke: red;
      }
    &lt;/style&gt;
    &lt;line x1="0" y1="0" x2="100" y2="100"&gt;
  &lt;/svg&gt;
  
  &lt;svg&gt;
    &lt;style&gt;
      line {
        stroke: blue;
      }
    &lt;/style&gt;
    &lt;line x1="0" y1="0" x2="100" y2="100"&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/LmmyEe" rel="nofollow noreferrer">https://codepen.io/anon/pen/LmmyEe</a></p>
  
  <p><strong>Edit</strong></p>
  
  <p>Maybe this is a better example:</p>
  
  <pre><code>&lt;svg&gt;
    &lt;style&gt;
      .colored {
        stroke: red;
      }
    &lt;/style&gt;
    &lt;line class="colored" x1="0" y1="0" x2="100" y2="100"&gt;
  &lt;/svg&gt;
  
  &lt;svg&gt;
    &lt;style&gt;
      .colored {
        stroke: blue;
      }
    &lt;/style&gt;
    &lt;line class="colored" x1="0" y1="0" x2="100" y2="100"&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I would like to be able to let the user edit the style of each of these SVGs so that the user needs to know only what a class does for all the SVGs. If I would use different classes, like "colored1" and "colored2" or so, that would make it trickier for the user which I want to avoid.</p>