Color keyword "none" not parsed correctly
bsweeney opened this issue · 3 comments
bsweeney commented
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:
Actual Rendering:
bsweeney commented
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 commented
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.