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

Color keyword "none" not parsed correctly #100

Closed
bsweeney opened this issue Dec 26, 2022 · 3 comments · Fixed by #105
Closed

Color keyword "none" not parsed correctly #100

bsweeney opened this issue Dec 26, 2022 · 3 comments · Fixed by #105
Labels
Milestone

Comments

@bsweeney
Copy link
Member

bsweeney commented Dec 26, 2022

When an element is contained within a group element, the group element attributes override the attributes of its children.

<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
    <g fill="none">
        <rect width="100" height="100" fill="orange" stroke="blue" stroke-width="20" />
    </g>
</svg>

Expected Rendering:
group-attr-expected

Actual Rendering:
group-attr-actual

@bsweeney bsweeney added the bug label Dec 26, 2022
@bsweeney bsweeney added this to the 0.5.1 milestone Dec 26, 2022
@bsweeney bsweeney changed the title Group element attributes override child element attributes Fill keyword "none" not parsed correctly Feb 4, 2023
@bsweeney
Copy link
Member Author

bsweeney commented Feb 4, 2023

Additional samples from dompdf/dompdf#3069 (comment):

<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.703125 15.8125C2.57812 15.2865 3.51562 14.0755 3.51562 12.1797V10.625C3.51562 9.52604 3.97917 8.97656 4.90625 8.97656V7.35938C4 7.35938 3.53646 6.84115 3.51562 5.80469V4.14844C3.51562 3.1849 3.28125 2.40625 2.8125 1.8125C2.34375 1.21875 1.64062 0.789062 0.703125 0.523438L0.265625 1.78125C0.661458 1.92708 0.960938 2.18229 1.16406 2.54688C1.36719 2.90625 1.47396 3.40625 1.48438 4.04688V5.6875C1.48438 6.86458 1.95052 7.6901 2.88281 8.16406C1.95052 8.64323 1.48438 9.47396 1.48438 10.6562V12.3125C1.45833 13.5312 1.05208 14.276 0.265625 14.5469L0.703125 15.8125Z" fill="#00CFB4"/>
<path d="M5.70312 15.8125C7.57812 15.2865 8.51562 14.0755 8.51562 12.1797V10.625C8.51562 9.52604 8.97917 8.97656 9.90625 8.97656V7.35938C9 7.35938 8.53646 6.84115 8.51562 5.80469V4.14844C8.51562 3.1849 8.28125 2.40625 7.8125 1.8125C7.34375 1.21875 6.64062 0.789062 5.70312 0.523438L5.26562 1.78125C5.66146 1.92708 5.96094 2.18229 6.16406 2.54688C6.36719 2.90625 6.47396 3.40625 6.48438 4.04688V5.6875C6.48438 6.86458 6.95052 7.6901 7.88281 8.16406C6.95052 8.64323 6.48438 9.47396 6.48438 10.6562V12.3125C6.45833 13.5312 6.05208 14.276 5.26562 14.5469L5.70312 15.8125Z" fill="#00CFB4"/>
</svg>
<svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.57812 15.8125C7.70312 15.2865 6.76562 14.0755 6.76562 12.1797V10.625C6.76562 9.52604 6.30208 8.97656 5.375 8.97656V7.35938C6.28125 7.35938 6.74479 6.84115 6.76562 5.80469V4.14844C6.76562 3.1849 7 2.40625 7.46875 1.8125C7.9375 1.21875 8.64062 0.789062 9.57812 0.523438L10.0156 1.78125C9.61979 1.92708 9.32031 2.18229 9.11719 2.54688C8.91406 2.90625 8.80729 3.40625 8.79688 4.04688V5.6875C8.79688 6.86458 8.33073 7.6901 7.39844 8.16406C8.33073 8.64323 8.79688 9.47396 8.79688 10.6562V12.3125C8.82292 13.5312 9.22917 14.276 10.0156 14.5469L9.57812 15.8125Z" fill="#00CFB4"/>
<path d="M4.57812 15.8125C2.70312 15.2865 1.76562 14.0755 1.76562 12.1797V10.625C1.76562 9.52604 1.30208 8.97656 0.375 8.97656V7.35938C1.28125 7.35938 1.74479 6.84115 1.76562 5.80469V4.14844C1.76562 3.1849 2 2.40625 2.46875 1.8125C2.9375 1.21875 3.64062 0.789062 4.57812 0.523438L5.01562 1.78125C4.61979 1.92708 4.32031 2.18229 4.11719 2.54688C3.91406 2.90625 3.80729 3.40625 3.79688 4.04688V5.6875C3.79688 6.86458 3.33073 7.6901 2.39844 8.16406C3.33073 8.64323 3.79688 9.47396 3.79688 10.6562V12.3125C3.82292 13.5312 4.22917 14.276 5.01562 14.5469L4.57812 15.8125Z" fill="#00CFB4"/>
</svg>

@bsweeney
Copy link
Member Author

bsweeney commented Feb 4, 2023

I believe the issue is that php-svg-lib is attempting to parse the "none" keyword as a color array, the result being that the opacity is determined to be 0. Since the parent elements in these samples have fill="none" the child elements are not visible.

To work around the issue remove fill="none" from any element that has it.

bsweeney added a commit that referenced this issue Feb 4, 2023
@bsweeney bsweeney linked a pull request Feb 4, 2023 that will close this issue
@bsweeney bsweeney changed the title Fill keyword "none" not parsed correctly Color keyword "none" not parsed correctly Feb 4, 2023
@curry684
Copy link

I can confirm that my PDFs are identical now with up to date dependencies once I removed the fill="none" from the <svg> root element. I'll subscribe to #105 so I can test whether it fundamentally fixes it when merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants