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.

Sign up for GitHub

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

Jump to bottom

Inline Clip-Path Specifications Ignored - Incorrect PDF Rendering #181

Open
Ganesh-AT opened this issue Dec 1, 2023 · 1 comment
Open

Inline Clip-Path Specifications Ignored - Incorrect PDF Rendering #181

Ganesh-AT opened this issue Dec 1, 2023 · 1 comment

Comments

@Ganesh-AT
Copy link

Ganesh-AT commented Dec 1, 2023 •
edited
Loading

Reproducible with the top of trunk code as of Dec 1, 2023

Example SVG Code:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with WaveDrom -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgcontent_0" height="100%" width="100%" viewBox="0 0 270 60" overflow="hidden" class="WaveDrom">
    <style type="text/css">
        text {
            font-size: 11pt;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            font-stretch: normal;
            text-align: center;
            fill-opacity: 1;
            font-family: Helvetica;
        }
        .gmarks {
            stroke: #888;
            stroke-width: 0.5;
            stroke-dasharray: 1, 3;
        }
        .background {
            stroke: none;
            fill: white;
        }
        .info {
            fill: #0041c4;
        }
        .s_wd_default_1 {
            fill: none;
            stroke: #000;
            stroke-width: 1;
            stroke-linecap: round;
            stroke-linejoin: miter;
            stroke-miterlimit: 4;
            stroke-opacity: 1;
            stroke-dasharray: none;
        }
    </style>
    <defs>
        <g id="wd_default_000"><path d="m0,20 20,0" class="s_wd_default_1" /></g>
        <g id="wd_default_0m1"><path d="M0,20 3,20 9,0 20,0" class="s_wd_default_1" /></g>
        <g id="wd_default_111"><path d="M0,0 20,0" class="s_wd_default_1" /></g>
        <g id="wd_default_1m0"><path d="m0,0 3,0 6,20 11,0" class="s_wd_default_1" /></g>
    </defs>
    <g id="waves_0">
        <rect width="270" height="60" class="background" />
        <g transform="translate(80.5,0.5)" id="lanes_0">
            <g id="gmarks_0">
                <g class="gmarks">
                    <line id="gmark_0_0" x1="0" y1="0" x2="0" y2="60" />
                    <line id="gmark_1_0" x1="40" y1="0" x2="40" y2="60" />
                    <line id="gmark_2_0" x1="80" y1="0" x2="80" y2="60" />
                    <line id="gmark_3_0" x1="120" y1="0" x2="120" y2="60" />
                    <line id="gmark_4_0" x1="160" y1="0" x2="160" y2="60" />
                    <line id="gmark_5_0" x1="200" y1="0" x2="200" y2="60" />
                </g>
            </g>
            <g transform="translate(0,5)" id="wavelane_0_0">
                <text x="-10" y="15" class="info lane_label" text-anchor="end" xml:space="preserve"><tspan>CLK_NP</tspan></text>
                <g id="wavelane_draw_0_0" clip-path="polygon(0 -2, 4000000000020 -2, 4000000000020 22, 0 22)">
                    <use xlink:href="#wd_default_000" />
                    <use transform="translate(20)" xlink:href="#wd_default_000" />
                    <use transform="translate(40)" xlink:href="#wd_default_0m1" />
                    <use transform="translate(60)" xlink:href="#wd_default_111" />
                    <use transform="translate(80)" xlink:href="#wd_default_1m0" />
                    <use transform="translate(100)" xlink:href="#wd_default_000" />
                    <use transform="translate(120)" xlink:href="#wd_default_0m1" />
                    <use transform="translate(140)" xlink:href="#wd_default_111" />
                </g>
            </g>
            <g transform="translate(0,35)" id="wavelane_1_0">
                <text x="-10" y="15" class="info lane_label" text-anchor="end" xml:space="preserve"><tspan>CLK_P</tspan></text>
                <g transform="translate(-10)" id="wavelane_draw_1_0" clip-path="polygon(10 -2, 4000000000030 -2, 4000000000030 22, 10 22)">
                    <use xlink:href="#wd_default_000" clip-path="polygon(10 -2, 20 -2, 22 22, 10 22)" />
                    <use transform="translate(20)" xlink:href="#wd_default_000" />
                    <use transform="translate(40)" xlink:href="#wd_default_0m1" />
                    <use transform="translate(60)" xlink:href="#wd_default_111" />
                    <use transform="translate(80)" xlink:href="#wd_default_1m0" />
                    <use transform="translate(100)" xlink:href="#wd_default_000" />
                    <use transform="translate(120)" xlink:href="#wd_default_0m1" />
                    <use transform="translate(140)" xlink:href="#wd_default_111" />
                </g>
            </g>
        </g>
    </g>
</svg>

Rendering on demo page:

image

Rendering with Chromium engine (Edge) (left) and Firefox (right):

image
@Ganesh-AT Ganesh-AT changed the title SVG Clip-Path with Transform Rendered Incorrectly in PDF SVG Clip-Path with 'use' Rendered Incorrectly in PDF Dec 1, 2023
@Ganesh-AT
Copy link
Author

After spending some time debugging through the Chrome Dev Tools, I figured out that the issue is related to some call to resolveUrl within the source code.

For testing, I re-framed the clip path polygon as a defs entry and referenced it with the url scheme. The generated PDF seems to be OK after I made the change as below:

Raw SVG after re-framing offending clip path as a defs entry:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgcontent_0" height="100%" width="100%" viewBox="0 0 270 30" overflow="hidden" class="WaveDrom">
    <style type="text/css">
        text {
            font-size: 11pt;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            font-stretch: normal;
            text-align: center;
            fill-opacity: 1;
            font-family: Helvetica;
        }
        .background {
            stroke: none;
            fill: white;
        }
        .gmarks {
            stroke: #888;
            stroke-width: 0.5;
            stroke-dasharray: 1, 3;
        }
        .info {
            fill: #0041c4;
        }
        .s_wd_default_1 {
            fill: none;
            stroke: #000;
            stroke-width: 1;
            stroke-linecap: round;
            stroke-linejoin: miter;
            stroke-miterlimit: 4;
            stroke-opacity: 1;
            stroke-dasharray: none;
        }
    </style>
    <defs>
        <g id="wd_default_000"><path d="m0,20 20,0" class="s_wd_default_1" /></g>
        <g id="wd_default_0m1"><path d="M0,20 3,20 9,0 20,0" class="s_wd_default_1" /></g>
        <g id="wd_default_111"><path d="M0,0 20,0" class="s_wd_default_1" /></g>
        <g id="wd_default_1m0"><path d="m0,0 3,0 6,20 11,0" class="s_wd_default_1" /></g>
	<clipPath id="L1_bf_poly">
		<polygon points="10 -2, 20 -2, 22 22, 10 22" />
	</clipPath>
    </defs>
    <g id="waves_0">
        <rect width="270" height="30" class="background" />
        <g transform="translate(80.5,0.5)" id="lanes_0">
            <g id="gmarks_0">
                <g class="gmarks">
                    <line id="gmark_0_0" x1="0" y1="0" x2="0" y2="30" />
                    <line id="gmark_1_0" x1="40" y1="0" x2="40" y2="30" />
                    <line id="gmark_2_0" x1="80" y1="0" x2="80" y2="30" />
                    <line id="gmark_3_0" x1="120" y1="0" x2="120" y2="30" />
                    <line id="gmark_4_0" x1="160" y1="0" x2="160" y2="30" />
                    <line id="gmark_5_0" x1="200" y1="0" x2="200" y2="30" />
                </g>
            </g>
            <g transform="translate(0,5)" id="wavelane_0_0">
                <text x="-10" y="15" class="info lane_label" text-anchor="end" xml:space="preserve"><tspan>CLK_P</tspan></text>
                <g transform="translate(-10)" id="wavelane_draw_0_0" clip-path="polygon(10 -2, 4000000000030 -2, 4000000000030 22, 10 22)">
                    <!-- <use xlink:href="#wd_default_000" clip-path="polygon(10 -2, 20 -2, 22 22, 10 22)" /> -->
                    <use xlink:href="#wd_default_000" clip-path="url(#L1_bf_poly)" />
                    <use transform="translate(20)" xlink:href="#wd_default_000" />
                    <use transform="translate(40)" xlink:href="#wd_default_0m1" />
                    <use transform="translate(60)" xlink:href="#wd_default_111" />
                    <use transform="translate(80)" xlink:href="#wd_default_1m0" />
                    <use transform="translate(100)" xlink:href="#wd_default_000" />
                    <use transform="translate(120)" xlink:href="#wd_default_0m1" />
                    <use transform="translate(140)" xlink:href="#wd_default_111" />
                </g>
            </g>
        </g>
        <g id="groups_0"><g /></g>
    </g>
</svg>

I am hoping there is someone out here who is familiar with the code base / control flow, and can propose a fix for inline clip-path specifications.

@Ganesh-AT Ganesh-AT changed the title SVG Clip-Path with 'use' Rendered Incorrectly in PDF Inline Clip-Path Specifications Ignored - Incorrect PDF Rendering Dec 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Ganesh-AT