Creating a reusable filter with 3.0

[PiotrFr]

With version 2.0 I can create a filter

var filter = new SVG.Filter(); //2.0

// create the filters effects here
filter.offset(20, 20).gaussianBlur(5);
filter.blend(filter.$source, blur);
filter.size('200%','200%').move('-50%', '-50%')

But with version 3.0 I get

TypeError: (intermediate value).Filter is not a function

When I try

var filter = new SVG().Filter();
….

I get TypeError: _svgdotjs_svg_js_src_svg__WEBPACK_IMPORTED_MODULE_2__.default.Filter is not a constructor

[Fuzzyma]

You use weback, so I assume, that you imported svg.js and svg.filter.js into your file. svg.filter.js exports the Filter class - there you have it

[PiotrFr]

Thank you. 🥇... and? :)

I import

import SVG from "@svgdotjs/svg.js/src/svg" 
import  "@svgdotjs/svg.filter.js"

I can for example do

      image.filterWith(function(add) {
        add.colorMatrix('saturate', 0)
      })

But is var filter = new SVG().Filter(); correct and what should I change?

[Fuzzyma]

As I said. Filter is exported from svg.filter.js:

import Filter from "@svgdotjs/svg.filter.js"

[PiotrFr]

When I use import Filter from "@svgdotjs/svg.filter.js"

I get

"message": "Module '\"c:/Users/xxx/pro/zmaz01/node_modules/@svgdotjs/svg.filter.js/svg.filter.js\"' has no default export.",

We do not have "c:/Users/xxx/pro/zmaz01/node_modules/@svgdotjs/svg.filter.js/svg.filter.js" I have c:/Users/xxx/pro/zmaz01/node_modules/@svgdotjs/svg.filter.js/src/svg.filter.js When I copy svg.filter.js to path .....svg.filter.js I get the same error message.

[Fuzzyma]

Thats the file which is imported: https://github.com/svgdotjs/svg.filter.js/blob/master/src/svg.filter.js And that HAS a default export

[ssamikk]

import Filter from '@svgdotjs/svg.filter.js'; this.svgJS = SVG('#canvas'); this.grayFilter = new Filter(); this.grayFilter.colorMatrix('saturate', 0); const image = this.svgJS.image(imagePath).size(v.imageWidth, v.imageHeight).move(v.compPosX, v.compPosY); image.filterWith(this.grayFilter); But with this use, I get a new svg element at the end of the document. <svg id="SvgjsSvg1001" width="2" height="0" style="overflow: hidden; top: -100%; left: -100%; position: absolute; opacity: 0;"> <defs id="SvgjsDefs1002"></defs> <polyline id="SvgjsPolyline1003" points="0,0"></polyline> <path id="SvgjsPath1004" d="M0 0 "></path> </svg>

[Fuzzyma]

That one was always there in svg.js v2. It's our parser which we need for calculations. In v3 it is only created on demand. If you don't like it, you can remove it. But it will reappear as soon as you use a function which needs it. It has nothing to do with this plugin!

[ssamikk]

But this does not create the filter itself. Solved the problem for myself as follows

if (this.grayFilter != null) { image.filterWith(this.grayFilter); } else { image.filterWith( add => { add.colorMatrix('saturate', '0'); }); this.grayFilter = image.filterer(); }

[Fuzzyma]

Ofc it does not create the filter in the Dom. You didn't attached it anywhere. You either go defs.add(filter) or just directly create the filter in the defs with const filter = defs.filter() which also gives you back a filter instance which you can reuse

[ssamikk]

Thanks for the answer.

[PiotrFr]

E.g

import { Component, OnInit } from '@angular/core';
import { SVG, Svg } from "@svgdotjs/svg.js"   //v 3.0
import "@svgdotjs/svg.filter.js"  //3.0.2

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  draw: Svg
  filter: any

  ngOnInit() {
    this.draw = SVG().addTo('#canvas').viewbox(0, 0, 300, 140)
    .attr({ overflow: "visible" })
    let rect = this.draw.rect(90, 100).fill('#f06');

    this.filter = this.draw.defs().filter()

    this.filter.dropShadow(this.filter.$sourceAlpha, 10, 10).gaussianBlur(5)
    this.filter.blend(this.filter.$source, blur)
    this.filter.size('200%', '200%').move('-50%', '-50%')

    rect.filterWith(this.filter) //v3.0

  }
}