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

[BUG]: strokeDasharray causes Error: dash([null], {}) invalid error #2899

Open
jaidetree opened this issue Oct 6, 2024 · 2 comments
Open

Comments

@jaidetree
Copy link

jaidetree commented Oct 6, 2024

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:

image

What it should do:

image

Desktop (please complete the following information):

  • OS: MacOS
  • React-pdf version v4
@jaidetree
Copy link
Author

Looked through the code and found the problem:

if (value) ctx.dash(value.split(',').map(Number));

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

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

2 participants
@jaidetree and others