Svg.js: Including CSS style files within SVG

[edemaine]

SVG supports a style tag where you can embed CSS to be referenced by tag's classes. You already support adding classes. Could we get a helper to add style tags to the top-level SVG (as in this example) and/or to the defs section (as in this example)? I'd be fine with the argument just being a CSS string...

[Fuzzyma]

I answered a question about that on stackoverflow: http://stackoverflow.com/questions/35681530/specify-font-from-font-file-in-svg-using-svg-js/35681770#35681770

I altered the code a bit:

SVG.Style = SVG.invent({
  // Initialize node
  create: 'style'

  // Inherit from
, inherit: SVG.Element

  // Add class methods
, extend: {

  , style: function(style){
      if(style == null) return this.node.textContent
      this.node.textContent = style
      return this
    }

  }

, construct: {
    // Create a style element
    style: function(style) {
      return this.put((new SVG.Style()).style(style))
    }
  }

})

So you would go this way:
draw.defs().style('#myId{fill:red}')

Of course advanced rule handling would be better - maybe later ^^

[edemaine]

Had occasion to do this again. svg.element('style').words('...') works, though it'd still be nice to have a more intuitive helper here. I guess the tricky part is naming --- .style already means apply a style, not access a <style> tag. I guess .defs().style is a fine way to do it.

[Fuzzyma]

Yes... Naming clash... it could be named styleTag instead. However I am not sure about what you are asking

[dotnetCarpenter]

Ref: https://github.com/svgdotjs/svg.js/issues/579

[wout]

@Fuzzyma .stylesheet() would be better than .styleTag() I think.

UPDATE
Or we could follow the jQuery api and use css() instead of style() and use style() to create an inline stylesheet. That would introduce a breaking change and therefore a 3.0 feature.

UPDATE 2
Implementing the full jQuery api would be good I think. Take this for example:
http://zeptojs.com/#css

Getting multiple properties is a nice feature as well. Also for the attr() method by the way.