uxebu / bonsai

BonsaiJS is a graphics library and renderer
http://bonsaijs.org
Other
1.96k stars 189 forks source link

How I can use CSS styling for SVG files I load with BonsaiJS? #220

Closed Voronchuk closed 10 years ago

Voronchuk commented 10 years ago

Including

<style type="text/css">
#bet_inc:hover, #bet_dec:hover {
    cursor: pointer;
}
</style>

In SVG file doesn't work.

Also

 <?xml-stylesheet type="text/css" href="stylesheet.css" ?>
 <svg xmlns="http://www.w3.org/2000/svg">

In the head of SVG file doesn't work.

In general I need to have pointer cursor when hovering one of elements inside large (~14 mb) SVG file, which I load like

 bonsai.run(document.getElementById('viewport'), {
   width: 1280,
   height: 960,
   code: function() {
     // url that points to the image
     var url = '/games/js-CoolFarmers.svg';
     new Bitmap(url).on('load', function() {
       this.addTo(stage);
     });
   }
 });
basecode commented 10 years ago

In case of Bonsai's SVG Renderer the Bitmap API is mapped to the HTMLImageElement. Which means the rendered output of your script snippet is basically <img src="js-CoolFarmers.svg" />. Browsers ignore external resources, css interaction and all other things that can cause security vulnerabilities when the SVG is referenced via HTMLImageElement.

Failing plain SVG Example: http://jsbin.com/enoWIlUx/3