php-svg-lib icon indicating copy to clipboard operation
php-svg-lib copied to clipboard

line not rendered correctly

Open welove opened this issue 1 year ago • 4 comments

Hello,

If I use version 0.8.2 I get this SVG correctly rendered:

Captura de ecrã 2024-05-30, às 13 04 24

But with version 2.0.4 or 3.0, it shows like this in Google Chrome PDF Viewer:

Captura de ecrã 2024-05-30, às 13 04 42

But if I download the file, those strange lines don't appear in the actual PDF... In Safari PDF viewer they don't show, I only see those lines in Google Chrome.

I need to upgrade from 0.8.2 because in this version, these SVG don't render the letters (they are in curves):

Dompdf 2 or 3: Captura de ecrã 2024-05-30, às 13 04 58

Dompdf 0.8: Captura de ecrã 2024-05-30, às 13 05 16

Any help?

I need both cases to work properly

thank you in advance

welove avatar May 30 '24 12:05 welove

Can you supply the SVG so I can attempt to reproduce the error?

bsweeney avatar May 30 '24 12:05 bsweeney

I'm printing as an image like this:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjQxNi42NjY2NjY2NjY2NjciPgoJPCEtLSBjcmVhdGVkIGJ5IGh0dHBzOi8vd3d3Lm9wdGljdXR0ZXIuY29tIC0tPgogICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAucmVtbmFudExhYmVsU3R5bGUgeyBmb250LXNpemU6IDE1cHg7IGZpbGw6ICM2MDYwNjA7IH0KICAgICAgICAubGFiZWxTdHlsZSB7IGZvbnQtc2l6ZTogMTVweDsgZmlsbDogIzAwMDAwMDt9CiAgICA8L3N0eWxlPgoJPHJlY3Qgd2lkdGg9IjEwMDAiIGhlaWdodD0iNDE2LjY2NjY2NjY2NjY2NyIgc3R5bGU9ImZpbGw6I0YwRjBGMDtzdHJva2Utd2lkdGg6MTtzdHJva2U6YmxhY2siIC8+CgkJCTxyZWN0IHg9IjYzMCIgeT0iMTA1IiB3aWR0aD0iMzcwIiBoZWlnaHQ9IjIxMCIgc3R5bGU9ImZpbGw6I0YwRjBGMDtzdHJva2Utd2lkdGg6MTtzdHJva2U6I0EwQTBBMCIvPgoJCQkJPHRleHQgeD0iODE1IiB5PSIxMjAiIGNsYXNzPSJyZW1uYW50TGFiZWxTdHlsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9InRvcCIgcG9pbnRlci1ldmVudHM9Im5vbmUiPgogICAgICAgICAgICAgICAgICAgIDEsMTEwCgkJCQk8L3RleHQ+CgkJCQk8dGV4dCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NDUsIDIxMCkgcm90YXRlKC05MCkiIGNsYXNzPSJyZW1uYW50TGFiZWxTdHlsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9InRvcCIgcG9pbnRlci1ldmVudHM9Im5vbmUiPgogICAgICAgICAgICAgICAgICAgIDYzMAoJCQkJPC90ZXh0PgoJCQk8cmVjdCB4PSIwIiB5PSIzMTUiIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMS42NjY2NjY2NjY2NjciIHN0eWxlPSJmaWxsOiNGMEYwRjA7c3Ryb2tlLXdpZHRoOjE7c3Ryb2tlOiNBMEEwQTAiLz4KCQkJCTx0ZXh0IHg9IjUwMCIgeT0iMzMwIiBjbGFzcz0icmVtbmFudExhYmVsU3R5bGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJ0b3AiIHBvaW50ZXItZXZlbnRzPSJub25lIj4KICAgICAgICAgICAgICAgICAgICAzLDAwMAoJCQkJPC90ZXh0PgoJCQkJPHRleHQgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUsIDM2NS44MzMzMzMzMzMzMzMpIHJvdGF0ZSgtOTApIiBjbGFzcz0icmVtbmFudExhYmVsU3R5bGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJ0b3AiIHBvaW50ZXItZXZlbnRzPSJub25lIj4KICAgICAgICAgICAgICAgICAgICAzMDUKCQkJCTwvdGV4dD4KCQkJPHJlY3QgeD0iOTczLjMzMzMzMzMzMzMzMyIgeT0iMCIgd2lkdGg9IjI2LjY2NjY2NjY2NjY2NyIgaGVpZ2h0PSIxMDUiIHN0eWxlPSJmaWxsOiNGMEYwRjA7c3Ryb2tlLXdpZHRoOjE7c3Ryb2tlOiNBMEEwQTAiLz4KCQkJCTx0ZXh0IHg9Ijk4Ni42NjY2NjY2NjY2NjciIHk9IjE1IiBjbGFzcz0icmVtbmFudExhYmVsU3R5bGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJ0b3AiIHBvaW50ZXItZXZlbnRzPSJub25lIj4KICAgICAgICAgICAgICAgICAgICA4MAoJCQkJPC90ZXh0PgoJCQkJPHRleHQgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTg4LjMzMzMzMzMzMzMzMywgNTIuNSkgcm90YXRlKC05MCkiIGNsYXNzPSJyZW1uYW50TGFiZWxTdHlsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9InRvcCIgcG9pbnRlci1ldmVudHM9Im5vbmUiPgogICAgICAgICAgICAgICAgICAgIDMxNQoJCQkJPC90ZXh0PgoJCQk8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNjY2LjY2NjY2NjY2NjY2NyIgaGVpZ2h0PSIxMDUiIHN0eWxlPSJmaWxsOiM3NGI5ZmY7c3Ryb2tlLXdpZHRoOjE7c3Ryb2tlOmJsYWNrIi8+CgkJCTx0ZXh0IHg9IjMzMy4zMzMzMzMzMzMzMzMiIHk9IjE1IiBjbGFzcz0ibGFiZWxTdHlsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9InRvcCIgcG9pbnRlci1ldmVudHM9Im5vbmUiPgogICAgICAgICAgICAgICAgMiwwMDAKCQkJPC90ZXh0PgoJCQk8dGV4dCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNSwgNTIuNSkgcm90YXRlKC05MCkiIGNsYXNzPSJsYWJlbFN0eWxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0idG9wIiBwb2ludGVyLWV2ZW50cz0ibm9uZSI+CiAgICAgICAgICAgICAgICAzMTUKCQkJPC90ZXh0PgoJCQk8cmVjdCB4PSIwIiB5PSIxMDUiIHdpZHRoPSI2MzAiIGhlaWdodD0iMTA1IiBzdHlsZT0iZmlsbDojZmZlYWE3O3N0cm9rZS13aWR0aDoxO3N0cm9rZTpibGFjayIvPgoJCQk8dGV4dCB4PSIzMTUiIHk9IjEyMCIgY2xhc3M9ImxhYmVsU3R5bGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJ0b3AiIHBvaW50ZXItZXZlbnRzPSJub25lIj4KICAgICAgICAgICAgICAgIDEsODkwCgkJCTwvdGV4dD4KCQkJPHRleHQgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUsIDE1Ny41KSByb3RhdGUoLTkwKSIgY2xhc3M9ImxhYmVsU3R5bGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJ0b3AiIHBvaW50ZXItZXZlbnRzPSJub25lIj4KICAgICAgICAgICAgICAgIDMxNQoJCQk8L3RleHQ+CgkJCTxyZWN0IHg9IjAiIHk9IjIxMCIgd2lkdGg9IjYzMCIgaGVpZ2h0PSIxMDUiIHN0eWxlPSJmaWxsOiNmZmVhYTc7c3Ryb2tlLXdpZHRoOjE7c3Ryb2tlOmJsYWNrIi8+CgkJCTx0ZXh0IHg9IjMxNSIgeT0iMjI1IiBjbGFzcz0ibGFiZWxTdHlsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9InRvcCIgcG9pbnRlci1ldmVudHM9Im5vbmUiPgogICAgICAgICAgICAgICAgMSw4OTAKCQkJPC90ZXh0PgoJCQk8dGV4dCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNSwgMjYyLjUpIHJvdGF0ZSgtOTApIiBjbGFzcz0ibGFiZWxTdHlsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9InRvcCIgcG9pbnRlci1ldmVudHM9Im5vbmUiPgogICAgICAgICAgICAgICAgMzE1CgkJCTwvdGV4dD4KCQkJPHJlY3QgeD0iNjY2LjY2NjY2NjY2NjY2NyIgeT0iMCIgd2lkdGg9IjMwNi42NjY2NjY2NjY2NjciIGhlaWdodD0iMTA1IiBzdHlsZT0iZmlsbDojN2VkNmRmO3N0cm9rZS13aWR0aDoxO3N0cm9rZTpibGFjayIvPgoJCQk8dGV4dCB4PSI4MjAiIHk9IjE1IiBjbGFzcz0ibGFiZWxTdHlsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9InRvcCIgcG9pbnRlci1ldmVudHM9Im5vbmUiPgogICAgICAgICAgICAgICAgOTIwCgkJCTwvdGV4dD4KCQkJPHRleHQgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjgxLjY2NjY2NjY2NjY2NywgNTIuNSkgcm90YXRlKC05MCkiIGNsYXNzPSJsYWJlbFN0eWxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0idG9wIiBwb2ludGVyLWV2ZW50cz0ibm9uZSI+CiAgICAgICAgICAgICAgICAzMTUKCQkJPC90ZXh0PgoJCQkJPGxpbmUgeDE9IjAiIHkxPSIyMCIgeDI9IjEwMDAiIHkyPSIyMCIgc3Ryb2tlPSJub25lIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IjglIi8+CgkJCQk8bGluZSB4MT0iMCIgeTE9IjQwIiB4Mj0iMTAwMCIgeTI9IjQwIiBzdHJva2U9Im5vbmUiIHBvaW50ZXItZXZlbnRzPSJub25lIiBzdHJva2Utb3BhY2l0eT0iOCUiLz4KCQkJCTxsaW5lIHgxPSIwIiB5MT0iNjAiIHgyPSIxMDAwIiB5Mj0iNjAiIHN0cm9rZT0ibm9uZSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSI4JSIvPgoJCQkJPGxpbmUgeDE9IjAiIHkxPSI4MCIgeDI9IjEwMDAiIHkyPSI4MCIgc3Ryb2tlPSJub25lIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IjglIi8+CgkJCQk8bGluZSB4MT0iMCIgeTE9IjEwMCIgeDI9IjEwMDAiIHkyPSIxMDAiIHN0cm9rZT0ibm9uZSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSI4JSIvPgoJCQkJPGxpbmUgeDE9IjAiIHkxPSIxMjAiIHgyPSIxMDAwIiB5Mj0iMTIwIiBzdHJva2U9Im5vbmUiIHBvaW50ZXItZXZlbnRzPSJub25lIiBzdHJva2Utb3BhY2l0eT0iOCUiLz4KCQkJCTxsaW5lIHgxPSIwIiB5MT0iMTQwIiB4Mj0iMTAwMCIgeTI9IjE0MCIgc3Ryb2tlPSJub25lIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IjglIi8+CgkJCQk8bGluZSB4MT0iMCIgeTE9IjE2MCIgeDI9IjEwMDAiIHkyPSIxNjAiIHN0cm9rZT0ibm9uZSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSI4JSIvPgoJCQkJPGxpbmUgeDE9IjAiIHkxPSIxODAiIHgyPSIxMDAwIiB5Mj0iMTgwIiBzdHJva2U9Im5vbmUiIHBvaW50ZXItZXZlbnRzPSJub25lIiBzdHJva2Utb3BhY2l0eT0iOCUiLz4KCQkJCTxsaW5lIHgxPSIwIiB5MT0iMjAwIiB4Mj0iMTAwMCIgeTI9IjIwMCIgc3Ryb2tlPSJub25lIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IjglIi8+CgkJCQk8bGluZSB4MT0iMCIgeTE9IjIyMCIgeDI9IjEwMDAiIHkyPSIyMjAiIHN0cm9rZT0ibm9uZSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSI4JSIvPgoJCQkJPGxpbmUgeDE9IjAiIHkxPSIyNDAiIHgyPSIxMDAwIiB5Mj0iMjQwIiBzdHJva2U9Im5vbmUiIHBvaW50ZXItZXZlbnRzPSJub25lIiBzdHJva2Utb3BhY2l0eT0iOCUiLz4KCQkJCTxsaW5lIHgxPSIwIiB5MT0iMjYwIiB4Mj0iMTAwMCIgeTI9IjI2MCIgc3Ryb2tlPSJub25lIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IjglIi8+CgkJCQk8bGluZSB4MT0iMCIgeTE9IjI4MCIgeDI9IjEwMDAiIHkyPSIyODAiIHN0cm9rZT0ibm9uZSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSI4JSIvPgoJCQkJPGxpbmUgeDE9IjAiIHkxPSIzMDAiIHgyPSIxMDAwIiB5Mj0iMzAwIiBzdHJva2U9Im5vbmUiIHBvaW50ZXItZXZlbnRzPSJub25lIiBzdHJva2Utb3BhY2l0eT0iOCUiLz4KCQkJCTxsaW5lIHgxPSIwIiB5MT0iMzIwIiB4Mj0iMTAwMCIgeTI9IjMyMCIgc3Ryb2tlPSJub25lIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IjglIi8+CgkJCQk8bGluZSB4MT0iMCIgeTE9IjM0MCIgeDI9IjEwMDAiIHkyPSIzNDAiIHN0cm9rZT0ibm9uZSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSI4JSIvPgoJCQkJPGxpbmUgeDE9IjAiIHkxPSIzNjAiIHgyPSIxMDAwIiB5Mj0iMzYwIiBzdHJva2U9Im5vbmUiIHBvaW50ZXItZXZlbnRzPSJub25lIiBzdHJva2Utb3BhY2l0eT0iOCUiLz4KCQkJCTxsaW5lIHgxPSIwIiB5MT0iMzgwIiB4Mj0iMTAwMCIgeTI9IjM4MCIgc3Ryb2tlPSJub25lIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IjglIi8+Cjwvc3ZnPgo=

welove avatar May 30 '24 16:05 welove

I think the problem are these lines:

<line x1="0" y1="20" x2="1000" y2="20" stroke="none" pointer-events="none" stroke-opacity="8%"/>

stroke-opacity is not respected

welove avatar May 30 '24 16:05 welove

This is an issue with SvgLib. I see a couple of problems with how the latest version renders that element.

  1. The stroke is set to "none" so the line shouldn't render at all. I suspect SvgLib is mis-reading that as if it were black.
  2. Percentage values are not really supported for stroke-opacity (or other mixed-value attributes), so the percentage is treated as fully opaque.

I'm going to move this to the SvgLib project to address with the next release of SvgLib.

bsweeney avatar May 30 '24 20:05 bsweeney