How to add SVG filters to all instances?

0 favourites
  • 6 posts
From the Asset Store
Kids Game
$49 USD
New Sounds Added Update: 115 new sound effects added for no additional cost!
  • Hi

    I have an SVG file with a filled circle (<circle></circle>) inside.

    I'm using the SVG plugin and:

    - add to wrap container SVG object and invisible Sprite

    - Pin such SVG object to that Sprite

    - also add SVG object as a child to that Sprite

    Does somebody know how to pick all SVG instances and add an SVG filter to them?

    Adding filters inside an SVG file with a circle does not give that effect. They probably must be the inside of the same class. Here is required solution to add filters to the full layer with such instances.

    Filters I want to add feGaussianBlur, and feColorMatrix.

    Thanks

    Tagged:

  • any ideas? How to group all SVG instances and add them same style?

    I guess to create an SVG filter I should use something like this:

    	var defs = svg.append("defs");
    	var filter = defs.append("filter").attr("id","SVGFilter");
    	filter.append("feGaussianBlur")
    		.attr("in","SourceGraphic")
    		.attr("stdDeviation","5")
    		.attr("color-interpolation-filters","sRGB") 
    		.attr("result","blur");
    	filter.append("feColorMatrix")
    		.attr("in","blur")
    		.attr("mode","matrix")
    		.attr("values","1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -4")
    		.attr("result","effect");
    

    But I don't know how to use it over SVG instances and where to put it.

  • C3 uses WebGl so regular Html5 Canvas objects, and various effects won't work.

    The Svg object takes the regular elements and converts it to work in the accelerated context.

    You can use the Html Element for those however.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • C3 uses WebGl so regular Html5 Canvas objects, and various effects won't work.

    The Svg object takes the regular elements and converts it to work in the accelerated context.

    You can use the Html Element for those however.

    Thanks

    Do not actually understand how to make it work with HTML Element.

    I'm creating HTML Element with an "svg" tag and such content inside:

    <circle cx="50" cy="50" r="40" fill="red" />

    But in preview, it shows nothing.

    Also, to make that filter work right it is required to create 2 HTML Elements and place all instances of one inside of code of another.

  • Is there a way to create a custom (own) Effect (which will work as SVG filters) and add it to the layer with SVG Pictures?

    Probably without knowing programming it is too difficult.

  • The term filter is pretty generic so no one can answer that, but as I said before html canvas elements will not work in the game unless you place them in the html element object. If its not working then check that the code is correct.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)