Svg.js: `fill()` and `stroke()` should act as getters.

[Fuzzyma]

Not sure what to return here. An object? A color? A pattern?
We have to think about this.

A good solution might be to always return an object like this:

el.fill() // returns
{
  opacity: 0.5,
  rule: 'even',
  color: 'red' || url(#pattern1)
}

[wout]

el.fill() could indeed act like el.attr().

[Rufflet]

Hello guys. I implemented these methods as getters and they return exactly what was passed to the setter - only relevant attributes:

el.stroke({color: 'red', opacity: 0.5, width: 5})

el.stroke() // returns
{
  width: 5,
  color: "red",
  opacity: 0.5
}

I can make a pull request for this.

[Fuzzyma]

That sounds great! But we should have a talk about the api one more time. When it is used in the same way as attribue, the following needs to be possible:

el.stroke('key', 'value') // thes stroke-key to value
el.stroke() // returns the obj with all stroke values
el.stroke({...}) // sets an object
el.stroke(['color', 'width']) // returns an object only containing color and width

// then we have this little extra stuff which sets the color directly
// this is different from attr because attr('key') normally returns a value
el.stroke('#ccc')


// and last but not least it should return the pattern object when a pattern was set
el.fill().color === el.reference('fill') === SVG.Pattern

Iam not quite sure about the last example yet. What do you think? Maybe when the pattern object wasnt found we could return the url(#id) string instead?

PS: Please make your PR against the 3.0 branch because this feature is on the 3.0 milestone
PPS: In 3.0 attr has the attr([arr]) feature already build in in case you want to use it

[saivan]

Awesome to see! Why not just make a pull request on the 3.0 branch and we will have a look at it too. But yes, we didn't fully flesh out this one but yours seems to be a great start!

[Rufflet]

PPS: In 3.0 attr has the attr([arr]) feature already build in in case you want to use it

@Fuzzyma sorry for the inconvinience but I didn't find any line of code about attr([arr]) method

P.S. Do you have any draft documentation for version 3?

[Fuzzyma]

ai - I thought we already implemented that.
Well - The way how it should work is:

When an array is passed to attr() it returns an object with the attributes specified in the array

// returns {id: 'text1', fontFamily: 'Helvetica'}
el.attr(['id', 'font-family']')

Writing this, we really should discusss if we return attribues with a dash as CamelCase or as is.

Unfortunately we dont have any docs for 3.0 yet. Not even the Changelogs are up to date there. I really have to change that. However, most of the api of this library stayed the same. For most people only the "start" will change:

// svg.js v2
var canvas = SVG(id)

// svg.js v3
var canvas = SVG().addTo('#id').size('100%', '100%')

PS: I think the best overview about the changes are in the issues. Try to look into the 3.0 milestone

[Fuzzyma]

@Rufflet are you still on that? Would be great to hear your feedback. If you didnt find the time to create a PR that is fine. But please give us a link to the code where you implemented this :)

[Fuzzyma]

We decided to always return just the color when fill or stroke is called as getter. The implementatin is way easier and thats what we decided to expect when we call it as getter.
When the user really needs the other values he can opt for attr(['fill-opacity', 'stroke-width'}) instead