charlie_says

SVG Path Data

Recommended Posts

I'm working with SVGs in my project - this works fine, the sprite created from the texture does what I need.

But, I also need to do some calculations & further work from the path data in the SVG. I can't see any way of accessing this in the Texture or BaseTexture (although I may have missed it.)

If it isn't possible to get the path data from the texture, is it possible to  import the SVG file as data and then create the texture from it (leaving me the data to do what I need later)

Thanks

Share this post


Link to post
Share on other sites

Even further experimentation reveals that if I use:

  let tex = PIXI.Texture.from( this.assetPath + 'img/hat.svg')

then the texture's basetexture resource is an SVG resource - which is good.

Sadly the svg property of it is just a path to the file, not the data, which is not so good.

Does this mean that SVGs loaded via the loader are handled incorrectly? 

And, is there really no way to get the path infomation of a loaded SVG?

 

Edited by charlie_says

Share this post


Link to post
Share on other sites

Charlie, did you look at the source of SVGResource? IT has an option to load from text. I dont know whether it creates SVG element that you can manipulate. That's all PixiJS has on SVG's, so you are asking for advanced user experience. SVG is huge problem for pixi. There're plugins like https://github.com/eXponenta/pixi5-svg . Nothing gives you full implementation of SVG.

Share this post


Link to post
Share on other sites

I had a quick look, and didn't see anything that would allow loading from text - can you point me to a line?

I did find:

 (this as any).svg = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(this.svg)))}`;

which would seem likely to overwrite any path data...

Share this post


Link to post
Share on other sites
On 12/1/2020 at 8:18 PM, charlie_says said:

I'm working with SVGs in my project - this works fine, the sprite created from the texture does what I need.

But, I also need to do some calculations & further work from the path data in the SVG. I can't see any way of accessing this in the Texture or BaseTexture (although I may have missed it.)

If it isn't possible to get the path data from the texture, is it possible to  import the SVG file as data and then create the texture from it (leaving me the data to do what I need later)

Thanks

Hey Charlie, 

Did some work with SVGs a while back,   I used a combination of svgson package (https://www.npmjs.com/package/svgson) to get data out of svg files (mine needed to have path attributes), and some native html methods on the Path object. 
 

    static getSVGPaths(svgString)
    {
        return svgson.parseSync(
                svgString
        ).children.filter((child) =>
            child.name === "path" && child.attributes.d)
            .map((child) =>
                child.attributes.d);
    }

    static getPointsFromSVG(svgPath, spacing, scale)
    {
        const line = [];

        const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "path");

        svgEl.setAttributeNS(null, "d", svgPath);

        const totLength = svgEl.getTotalLength();
        let trackLength = 0;

        while (trackLength <= totLength)
        {
            const svgPoint = svgEl.getPointAtLength(trackLength);

            line.push({ x: svgPoint.x * scale, y: svgPoint.y * scale });
            trackLength += (spacing * scale);
        }

        return line;
    }

    static getSVGPathLength(svgPath)
    {
        const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "path");

        svgEl.setAttributeNS(null, "d", svgPath);

        return svgEl.getTotalLength();
    }


 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.