javascript - SVG/CSS woes, to embed or reference the file -

after reading several stack posts why might want use <img> or <object> tag reference svg file, i've yet find 1 answers specific question have regards css , svg <path> tags. if embed svg js or html, can manage hover events example, in css rules

a css rule if wanted have hover effect on svg map of buildings.

path[id^="building"]:hover {     opacity: 0.5; } 

but if svg file large (200kb), full of path vectors, , want instead reverence svg instead (see below samples), break above css rule. paths id beginning "building" stop showing hover effect of .5 opacity.

<object type="image/svg+xml" data="http://localhost:49031/my.svg" `width="300" height="300"></object>`' 

or

<img id="map" src="http://localhost:49031/my.svg"></img> 

i cant seem wrap head around way access paths inside reference svg file. i've started reading on <use> , <g> svg tags, have not come across missing link pulls me.

important note: realize can specify <style> tags inside each svg, rather not manage code way if there better option, i'm sure there is. these svgs used svg map, clickable hotspots trigger maps in , out of view individual buildings, or rooms on floor plan can selected, , write objects id form field.

faced reflexion before, img/svg file referenced url not "really" in dom , not "source editable"

did not find working solution using css. so, "trick" this, used javascript/jquery. since referenced files not "really" editable in dom, used ajax insert them. way, svg items "really" on page , css can used.

for example, svg source code request, , put div come :

<div id="image">     <svg xmlns:svg="http://www.w3.org/2000/svg" version="1.0" width="830.69293" height="275.62558" id="svg2">     //svg items     </svg> </div> 

in example, use svg file there : https://upload.wikimedia.org/wikipedia/commons/5/57/whcomplex.svg (i removed useless tags svg file , used svg items it)

then, used jquery event handlers set style on svg items, way :

$('body').on('click','#rect2384',function(){     //this working      $(this).css('fill','red');     $(this).css('opacity','0.2'); }); 

now, if use css style, :

//css :  <style>     .border{         fill:red;         opacity:0.2;     } </style>  //js/jquery $('body').on('click','#rect2384',function(){     $(this).toggleclass('border'); }); 

this working too, class added but "common css" attributes working. fill not working, opacity works fine why think that, actually, best solution svg dynamic styles avoid referenced files, , manage javascript/jquery , not css sheets.

so, me, there no way use css/styling on "referenced url" svg items... except tricking getting image source code , insert on page.

here quick fiddle, in html part can see "simplified source code" of svg file used, wikipedia original svg link, , div id "imagetwo" svg code... in css part see class border style use in example. in js part see svg code (i did without ajax effect same) in variable, , eventhandler on rect item (it "rose garden" item).

http://jsfiddle.net/pe24t8lk/1/

so, in own problem, used class attributes on svg items had style. used style tag in svg define "main items style" , used jquery eventhandlers set dynamic style attributes you're doing :hover.

hope you...