When this lib supports some attributes like fill-rules, defs, radialGradient, stop?

The correct implementation is:

 case 'C': {
                    this.bezierCurveTo(
                        command.cp1.x,
                        command.cp1.y,
                        command.cp2.x,
                        command.cp2.y,
                        x = command.end.x,
                        y = command.end.y
                    );
                    break;
                }

C is absolute (including control points)

Before fix:

After fix:

I´m wondering if it is possible to access the PIXI.DisplayObject properties from from the generated Graphics like so:

const svgSrc = PIXI.Loader.shared.resources['assets/frame.svg'].data;
const createdGraphic = new SVG(svgSrc);
createdGraphic.width = 100;

If I´m logging createdGraphic the output looks like the usual DisplayObject Data, but I can´t access it´s methods.

(I´m using loader.shared to fetch all resources before init)

Hi ,
i've installed pixi-svg and imported as an es6 but during usage it throws an error

SVG.js:12 Uncaught ReferenceError: PIXI is not defined

Seems like it needs PIXI saved in the window object
To avoid this error i need to use like this

import * as PIXI from 'pixi.js'
window.PIXI = PIXI
import {SVG} from 'pixi-svg'

const svg = new PIXI.SVG(document.getElementById('svg1').outerHTML);

Thank You!

I am trying to check if the arc command is actually working as intended, but keep getting the module error.

Here is a code sandbox showing it.

https://codesandbox.io/s/pixijs-examples-events-hit-test-forked-yxtdjh

Instead of drawing everything in one Graphics object, make a new child Graphics object for each SVG element.

This would result in a Pixi scene graph tree, which would make it possible to traverse the tree and apply translations, rotations, etc, to individual Graphics objects, just like working with any existing Pixi tree.

Currently, if one wants to animate something, they have to re-render the whole SVG each tick, which is much more expensive than (for example) finding a sub-node and modifying only that sub-node.

You've got the drawing commands mapped, you just need create the child Graphics objects, then apply the same drawing commands in the child Graphics.

Basically, instead of rendering all commands into the Graphics object passed into SVGGraphics.drawSVG, you would add children to that Graphics object, and apply commands to each child corresponding to each SVG elements, and etcetera for children of those children.

The result would be a tree that is similar in structure to the SVG DOM tree.

Earcut makes ugly fills. 😕 I wish there was a solution. Do you know what I mean?

There is a known bug that I've patched with d-path-parser documented here: MaxArt2501/d-path-parser#1

It affects paths with H0 and V0 commands. The bug results in these commands being ignored (and of course your svg paths looking incorrect).

The author of d-path-parser hasn't published the new version yet, but when they do pixi-svg will need to update it in the package.json.

I used your code in @pixi-essentials/svg @bigtimebuddy. Haha, and got this strange bug that messed up my client's figures.

I realized it occurred at 'm' (relative) commands after 'Z' (closePath). It was because you aren't updating the current point after closing the path.

In the SVG specification (section 8.3.3), it says:

At the end of the command, the new current point is set to the initial point of the current
subpath.

Just wanted to forward this fix from @pixi-essentials/svg to here.

x = this.currentPath.points[0] || 0;
y = this.currentPath.points[1] || 0;

this.closePath();

(here

Hi, How to change the SVG fill and stroke after object rendered? tried this way but didn't update any fill color.

svgObject.beginFill(0xf1c40f)
svgObject.endFill();

https://codesandbox.io/s/pixijs-examples-events-hit-test-forked-f9ttqe

Trying to use this with the output from: https://github.com/jankovicsandras/imagetracerjs

Getting the following error:
pixi-svg.js:8 Uncaught (in promise) TypeError: t.getAttribute is not a function
at e._svgStyle (pixi-svg.js:8)
at e._svgFill (pixi-svg.js:8)

I won't paste the entire imagetracer svg here, but it's all of the following type:

...

Bug found here:
pixijs/pixijs#7753

peerDepencencies version for @pixi/graphics is ^5 and should get upgraded to include 6, or else this will create issues with typings and having a mix of v5 and v6 of PixiJS.

Hi when i run npm install pixi-svg --save I can see the following in my node_modules directory. it contains no code

this is causing an error: Module not found: Error: Can't resolve 'pixi-svg'...

Why I cannot render this element?

<svg><path d="M476.98922567641745,249.94509216279818m0,13239.074933118814a13239.074933118814,13239.074933118814 0 1,1 0,-26478.14986623763a13239.074933118814,13239.074933118814 0 1,1 0,26478.14986623763z"></path></svg>

I get this

[PIXI.SVG] Draw command not supported: a

I know you're thinking of deprecating this package, but just wanted to report my findings upstream since I took your code.

In section $8.3.6 of the SVG 1.1 specifications, it describes the s/S commands are smooth cubic bezier curves. However, pixi-svg treats them as quadratic bezier curves.

I implemented them here if you need them:

https://github.com/SukantPal/pixi-essentials/blob/eb0c4a91a1b8f47d831e68fdf189ee23e628079b/packages/svg/src/SVGPathNode.ts#L187

Hi there again,

The reason why I am posting is that I am trying to move a data visualization created in d3 in PIXI. And it is complex as I using a cartographic projection.

I have a dumb issue with cleaning the screen. The previous rendering in PIXI was utterly cleaned, but here I have an overlapping with each cycle of drawing. May someone check if I am coding properly? Thanks, it is appreciated!

const projection = d3.geoMercator()
const geoPath = d3.geoPath(projection)

export function drawLinks() {
    stage.clear()
    s.links.forEach(link => {
        const path = geoPath({
            type: "LineString",
            coordinates: [link.source.spherical, link.target.spherical]
        })

        let element = document.createElement('svg');
        element.innerHTML = '<path stroke="black" stroke-width=".1" fill='none' d='${path}' />'
        const svg = new SVG(element)

        stage.addChild(svg)

    })
}

Consider using something like tinycolor. I think that can be faster than measureColor.