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
Post a Comment