jquery - SVG Path detection from a file -


i have following html 5 code ...

<!doctype html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script> <style type="text/css">  path#selection{ fill: black; } path#selection:hover{ fill:blue; } </style> </head>  <body>  <object data="america" type="image/svg+xml" id="test"></object>  </body> </html> 

the svg file i'm using exported gimp ...

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 20010904//en"           "http://www.w3.org/tr/2001/rec-svg-20010904/dtd/svg10.dtd">  <svg xmlns="http://www.w3.org/2000/svg"  width="38.2361in" height="19.4444in"  viewbox="0 0 2753 1400">   <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 </path> </svg> 

unfortunately path detection css hover not work if sits in seperate file. path drawn , displayed in browser, no problem. way have managed path#selection:hover work embed actual code in html file such ...

<!doctype html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script> <style type="text/css">  path#selection{ fill: black; } path#selection:hover{ fill:blue; } </style> </head>  <body>  <svg xmlns="http://www.w3.org/2000/svg"  width="38.2361in" height="19.4444in"  viewbox="0 0 2753 1400">   <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 </path> </svg>  </body> </html> 

this extremely inconvenient building large map include many countries rather svg remain in separate file. how may this?

you can put style:

<style type="text/css">  path#selection{ fill: black; } path#selection:hover{ fill:blue; } </style> 

...inside svg file. works long don't reference <img> or css background-image.

alternatively, suggested yourself, can include svg inline in html document. thing styles don't apply across documents, in same document.


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -