[BUG]: strokeDasharray causes `Error: dash([null], {}) invalid` error
Describe the bug The strokeDasharray property on a line throws an error
To Reproduce Steps to reproduce the behavior including code snippet (if applies):
Create a document like the following:
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg height="210" width="500">
<Line
x1="0"
y1="0"
x2="200"
y2="200"
strokeWidth={2}
stroke="rgb(255,0,0)"
strokeDasharray="0 16"
strokeLinecap="round"
/>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);
Results in an error:
Error: Error: dash([null], {}) invalid, lengths must be numeric and greater than or equal to zero
Reproduction URL:
https://react-pdf.org/repl?code=3187b0760ce02e004d09e01b02984605e18194a4e5600b6592803a6002764043299002806f00a06180076a0736402e191876a004d8404b305df8036000c3002f801a660a025006e66cd42458c24300c31eab180078008a180ae016d9182800f8cdb730015bb238b853a46041408524e1e053831002f647400220041001638d736748b2c00372e1822312e02287880260046593898007731612802788056594ab48cf4f300190964370eb6000f32f8cafe81f811b8b1818cc192d2d6b8f18ef805b892a5958ce80a10006b6400753a868092856df4dd83d8b88a2e00237a12a6a6a5590fb565d9eba83dc38f4c0c860351d8f13d8d8c0c21fafd7c00e4259a8100235028146a3c1e265690c066b3003d3b432e602764b8c48b012bc3c76a93acc07b2385ccc4d368004a34601403c960018a90a8d0e4051e806601b280000
Expected behavior
Expecting a dashed line to be rendered
https://developer.mozilla.org/en-US/play?id=2HO5eDrfICIq1bHgtVoPUdL7G8KOnXXMJUIGbkQGnLh0rSCSH3VOIl6d%2Fw%2BERdc1Sb5kwiE86pjQ5qRc
Screenshots
What it currently does:
What it should do:
Desktop (please complete the following information):
- OS: MacOS
- React-pdf version v4
Looked through the code and found the problem:
https://github.com/diegomura/react-pdf/blob/c0ec5d8d434b6c936c30d36a431e53256590e0d8/packages/render/src/primitives/renderSvg.js#L56
It expects a comma separated string like 0,16 vs the whitespace separated version the docs use. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
I'm glad there's a workaround but feels like this could be improved. I am happy to draft a PR if someone wants to propose a solution strategy