Comments (4)
@mgrudzinska nice to see you again!
but I haven't found any information in the SVG standard specifying where this point should be.
Only found this about the path start of the stroke for an SVG ellipse (circle): :
https://svgwg.org/svg2-draft/shapes.html#EllipseElement
Mathematically, an ‘ellipse’ element is mapped to an equivalent ‘path’ element that consists of four elliptical arc segments, each covering a quarter of the ellipse. The path begins at the "3 o'clock" point on the radius and proceeds in a clock-wise direction (before any transformation).
I have taken some screenshots to show how the various applications view the SVG:
Dash-offset-test.pdf
from thorvg.
from thorvg.
after #1985:
This is almost perfect except for the ellipses. It is because the starting point for the dashed lines being chosen differently in TVG and Inkscape. This could be easily changed in the appendCircle function, but I haven't found any information in the SVG standard specifying where this point should be. So, changing it just because it is set differently in another tool doesn't seem like the best idea, in my opinion.
Just to see whether the result would be exactly the same, I changed it, and yes, then everything looks like it does in Inkscape:
from thorvg.
@mgrudzinska nice to see you again!
nice to be back and see all of you here!
https://svgwg.org/svg2-draft/shapes.html#EllipseElement
Mathematically, an ‘ellipse’ element is mapped to an equivalent ‘path’ element that consists of four elliptical arc segments, each covering a quarter of the ellipse. The path begins at the "3 o'clock" point on the radius and proceeds in a clock-wise direction (before any transformation).
Thx! applied in #1987
Now the results from Inkscape/gimp/browsers and ThorVG are the same.
just to be sure I check more precisely:
<svg width="512" height="512" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="#f00" stroke-linejoin="bevel" stroke-width="15">
<ellipse cx="50" cy="245" rx="45" ry="75" stroke-dasharray="29.3"
stroke-dashoffset="0" />
<ellipse cx="250" cy="245" rx="45" ry="75" stroke-dasharray="29.3"
stroke-dashoffset="7" />
<ellipse cx="450" cy="245" rx="45" ry="75" stroke-dasharray="28.1"
stroke-linecap="square" />
</g>
</svg>
ThorVG after #1985 and #1987 (the expected results):
from thorvg.
Related Issues (20)
- svg: support for embedded images that are not linked for PNG, JPG or WebP HOT 5
- renderer: support an viewport interface of the canvas
- gl_engine: enhance portability with safety
- tvg_load_data Panics with Segmentation Fault When Loading Empty Lottie
- SwRender is stuck with the specific Lottie file HOT 24
- Incorrect arguments for 'result' Function in tvgLottieExpressions HOT 7
- Introduce the compact drawing region by applying the viewport
- web: optimize the performance with the multi-tasking HOT 1
- web: Separate the web feature into thorvg.web project.
- Always get Invalid argument error while loading svg files on Windows HOT 20
- frame buffer is not updated on tvg_lottie_animation_override for a previously rendered frame
- frame buffer not updating on tvg_lottie_animation_override for previously rendered frames HOT 1
- Support DPR (Device Pixel Ratio) option HOT 1
- Refactoring the renderer - raster engines. HOT 2
- Undefined symbol for tvg_canvas_set_viewport C API HOT 1
- lottie: incorrect masking drawing HOT 5
- lottie: "tp" support
- lottie: incorrect polystar transform direction HOT 1
- lottie: high cpu usage causing a browser freeze
- lottie: trim path issue
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from thorvg.