GithubHelp home page GithubHelp logo

Comments (7)

JackGit3 avatar JackGit3 commented on August 23, 2024 1

Ok thanks, text works now, however now I have an issue with the outline fill for the text being offset. For the following svg:
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="341.33333333333326" height="176" viewBox="-33.33333333333333 1 341.3333333333333 176"><text x="5" y="160" text-anchor="end" font-size="40" font-family="Arial" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke="rgb(239, 239, 239)" fill="none" >A</text><text x="195" y="160" text-anchor="start" font-size="40" font-family="Arial" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke="rgb(239, 239, 239)" fill="none" >1-327</text><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><path d="M100,40L100,15" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" stroke="rgb(239, 239, 239)" fill="none" ></path></g><path d="M25,50 l150,0 0,100 -150,0 z Z" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" stroke="rgb(239, 239, 239)" fill="none" ></path><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><path d="M75,140 C75,125 100,125 100,140 C100,125 125,125 125,140" stroke-width="4" stroke="black" fill="none" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><path d="M100,40L100,15" ></path></g><text x="5" y="160" text-anchor="end" font-size="40" font-family="Arial" stroke-width="4" stroke="none" fill="black" >A</text><text x="195" y="160" text-anchor="start" font-size="40" font-family="Arial" stroke-width="4" stroke="none" fill="black" >1-327</text></svg>

Everything displays correctly except the letter A on the left side, the white outline does not match up to where the letter is so that half of the letter is outside of the white outline, but everything else looks correct. For reference this is what it should look like: (attached png)
A 10031000151211000000

and this is what it currently looks like:
Capture

my hunch is the x = "5" is somehow being flipped to "-5"? I don't know much about svg and haven't looked deeply enough into the issue to say anything for sure.

Here's a copy with the outline in an easier to see color
A 10031000151211000000 (1)

from lunasvg.

sammycage avatar sammycage commented on August 23, 2024

Text rendering requires font so you have to load font before rendering.

You can load font by using SVGDocument::loadFontFromFile.

Please take a look at this issue #21 for more details.

from lunasvg.

sammycage avatar sammycage commented on August 23, 2024

Please can you try https://github.com/sammycage/lunasvg/releases/tag/v1.3.1

Let me know whether the problem is from PlutoVG.

from lunasvg.

JackGit3 avatar JackGit3 commented on August 23, 2024

Ok I'll try that tonight, will let you know in a few hours, thanks!

from lunasvg.

sammycage avatar sammycage commented on August 23, 2024

Ok I'll try that tonight, will let you know in a few hours, thanks!

Don't worry about it... PlutoVG is prefect

The problem is the text anchor

I don't have access to my computer right now. Finding the bug will be hard ๐Ÿคจ๐Ÿคจ๐Ÿคจ

from lunasvg.

sammycage avatar sammycage commented on August 23, 2024

Thank you for reporting this issue

from lunasvg.

JackGit3 avatar JackGit3 commented on August 23, 2024

Awesome thanks, works now. Had issue at first but it was my fault for forgetting to compile.

from lunasvg.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.