title: SVG Path detection from a file
body: <p>I have the following HTML 5 code ...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;
  
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  
  path#Selection{
  fill: black;
  }
  path#Selection:hover{
  fill:blue;
  }
  &lt;/style&gt;
  &lt;/head&gt; 
  &lt;body&gt;
  
  &lt;object data="America" type="image/svg+xml" id="test"&gt;&lt;/object&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The svg file that I'm using was exported from gimp as ...</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
            "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"&gt;
  
  &lt;svg xmlns="http://www.w3.org/2000/svg"
   width="38.2361in" height="19.4444in"
   viewBox="0 0 2753 1400"&gt;
    &lt;path id="Selection"
      fill="black" stroke="black" stroke-width="1"
      d="M 397.00,118.96
         C 397.00,118.96 414.00,115.96 414.00,115.96
           414.00,115.96 432.96,108.64 432.96,108.64
           432.96,108.64 441.04,107.73 441.04,107.73
  &lt;/path&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Unfortunately my path detection with css hover does not work if this sits in a seperate file. The path is however drawn and displayed with in my browser, no problem. The only way I have managed to get the path#Selection:hover to work is to embed the actual code in my HTML file as such ...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;
  
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  
  path#Selection{
  fill: black;
  }
  path#Selection:hover{
  fill:blue;
  }
  &lt;/style&gt;
  &lt;/head&gt; 
  &lt;body&gt;
  
  &lt;svg xmlns="http://www.w3.org/2000/svg"
   width="38.2361in" height="19.4444in"
   viewBox="0 0 2753 1400"&gt;
    &lt;path id="Selection"
      fill="black" stroke="black" stroke-width="1"
      d="M 397.00,118.96
         C 397.00,118.96 414.00,115.96 414.00,115.96
           414.00,115.96 432.96,108.64 432.96,108.64
           432.96,108.64 441.04,107.73 441.04,107.73
  &lt;/path&gt;
  &lt;/svg&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is however extremely inconvenient as I am building a large map to include many countries so I would rather that the svg remain in a separate file. How may I do this?</p>