add.offset is undefined

[geuis]

Trying to apply the drop shadow effect but add.offset is undefined.

Doing this server-side with svgdom.

Example code:

const window = require('svgdom')
const SVG = require('svg.js')(window);
const filters = require('svg.filter.js');
const document = window.document;

window.setFontDir(`${process.env.PWD}/font/`)
  .setFontFamilyMappings({'SourceSansProRegular': 'SourceSansPro-Regular.otf'})
  .preloadFonts();

const draw = SVG(document.documentElement)
  .size(1920, 1080)
  .viewbox(0, 0, 1920, 1080);

const text = draw.text((add) => {
  add.tspan('01/23/2017');
  const blur = add.offset(0, 1).in(add.sourceAlpha).gaussianBlur(1);
  add.blend(add.source, blur);
})
  .font({
    family: 'SourceSansProRegular',
    size: 40,
    fill: '#cc0000'
  })
  .move(0, 0);

[Fuzzyma]

You called text() and passed a callback function. There you can build up text. You never called filter(). That the parameter is called add is naming convention. However it does only have the methods of the element which is passed (add is a text in the first case and a filter in the second. Test has no offset function)

[hzrd149]

going off what @Fuzzyma said, the add object passed in to the function by .text() and .filter() are completely different. I cant speak for .text(), but the add object in .filter() is simple just the filter element passed into the function.

for example

let draw.rect(10, 10);

let add;
let filter = rect.filter((add) => {
  add = add;
})

console.log(filter === add) // => true

[Fuzzyma]

Hehe that code won't work :D! You overwrite the global add with your local ^^. However - thanks for clarifying things. I only at phone atm and writing code is hell

[geuis]

@Fuzzyma @rdfriedl Thanks guys. I didn't realize I was putting the filter in the wrong place. Modified code works just fine now!

const text = draw.text('2017/01/23')
  .font({
    family: 'LatoBlack',
    size: 40,
    fill: '#cc0000'
  })
  .move(0, 0)
  .filter((add) => {
    const blur = add.offset(0, 1).in(add.sourceAlpha).gaussianBlur(1);
    add.blend(add.source, blur);
  });