Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG issue #350

Open
dilip29jan opened this issue Apr 26, 2019 · 0 comments
Open

SVG issue #350

dilip29jan opened this issue Apr 26, 2019 · 0 comments

Comments

@dilip29jan
Copy link

dilip29jan commented Apr 26, 2019

SVG layout is breaking.

am trying to print doughnut developed in SVG into PDF. below is my sample doughnut code:

<title>PDF</title>
<svg width="300" height="300" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="padding-left: 45%;padding-top: 5%;">
    <!-- Center color -->
    <circle cx="50" cy="50" r="40" fill="white"></circle>
    <!-- Default color of ring -->
    <circle cx="50" cy="50" r="40" stroke-width="20" stroke="white"></circle>

    <!-- Progress -->
    <!-- The amount shown as 'filled' is the amount the ring fills, starting from right center (3 o' clock) -->
    <!-- 100% fill -->
    <circle cx="50" cy="50" r="40" fill="white" stroke-width="20" stroke="#2196f3" stroke-dasharray="251.2" stroke-dashoffset="0"></circle>
    <!-- 80% fill -->
    <circle cx="50" cy="50" r="40" fill="white" stroke-width="20" stroke="#ff5722" stroke-dasharray="251.2" stroke-dashoffset="50.3"></circle>
    <!-- 70% filled -->
    <circle cx="50" cy="50" r="40" fill="white" stroke-width="20" stroke="#009688" stroke-dasharray="251.2" stroke-dashoffset="75.36"></circle>
    <!-- 50% filled -->
    <circle cx="50" cy="50" r="40" fill="white" stroke-width="20" stroke="#9c27b0" stroke-dasharray="251.2" stroke-dashoffset="125.6"></circle>
    <!-- 40% filled -->
    <circle cx="50" cy="50" r="40" fill="white" stroke-width="20" stroke="#e91e63" stroke-dasharray="251.2" stroke-dashoffset="150.72"></circle>
    <!-- 20% filled -->
    <circle cx="50" cy="50" r="40" fill="white" stroke-width="20" stroke="#f44336" stroke-dasharray="251.2" stroke-dashoffset="200.96"></circle>
    <!-- Center Text -->
    <text x="40" y="50" fill="black" font-size="10">TEST</text>
</svg>

in each circle I updated "fill from "transparent" to "white" to get the center of donut white in color, other wise it is rendering to black.

issue1: fill = transparent is not working as expected
issue2: one of the cycles (mostly the last one ) "stroke-width" is failing to pick up
issue3: there is change in size of svg in html and pdf

am using
compile group: 'com.openhtmltopdf', name: 'openhtmltopdf-pdfbox', version: '0.0.1-RC19'
compile group: 'com.openhtmltopdf', name: 'openhtmltopdf-svg-support', version: '0.0.1-RC19'

below is my sample code:

PdfRendererBuilder builder = new PdfRendererBuilder();

        builder.withUri("test.html");
        builder.useFastMode();
        builder.toStream(os);
        builder.useSVGDrawer(new BatikSVGDrawer()); // Load SVG support plugin
        builder.run();
danfickle added a commit that referenced this issue May 1, 2019
This work moves sizing of replaced objects form externally in each replaced object implementation to internally in the core code. This should reduce duplication and mean all sizing properties are available on each replaced object type.

For example, now images have min-width and min-height as well as a border-box implementation.

This work is published initially in a new branch because while there are good tests for images we need to test the new sizing code for all the other replaced object options such as SVG, PDF, custom, etc.
danfickle added a commit that referenced this issue May 6, 2019
Including min-width/min-height and border-box sizing. With test.
danfickle added a commit that referenced this issue Jun 13, 2019
We can now use unit values such as mm in the width/height attribute of SVG images. With tests.
danfickle added a commit that referenced this issue Jul 4, 2019
…mg tag.

This is mostly a revert of d9cdd6a

I forgot about external SVGs rather than inline SVGs where the width/height attribute are converted to CSS earlier in the render process.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant