Support SVG’s stroke-dasharray

[cat6311]

在使用svg 的 stroke-dasharray="10,10" 屬性後，html轉成pdf後 ，沒有生成對應的虛線。 <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">

[grewn0uille]

Hi @cat6311,

Could you please write the issue in english?

[cat6311]

Hi @cat6311,

Could you please write the issue in english?

sorry. When using the stroke-dasharray="10,10" attribute of svg, the corresponding dashed lines are not generated as expected after converting HTML to PDF.

[liZe]

Yes, only the none value is supported. Related to #1346.

[liZe]

Other values could probably be added, even by Python devs who don’t know WeasyPrint’s internal code. If anyone is interested, just ask, I can help!

[FazleRabbbiferdaus172]

Hi @liZe ! I'd be very interested in contributing.

I'm comfortable with Python but, as you mentioned, I don't know the internals of WeasyPrint.

Could you provide some guidance on where I should start looking in the code to add this? I'm happy to do the research and work on a pull request.

[liZe]

Hi @FazleRabbbiferdaus172

Could you provide some guidance on where I should start looking in the code to add this? I'm happy to do the research and work on a pull request.

Hmmm… It’s embarrassing, but I think that everything actually works well already. Here’s an example from MDN:

<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <style>
    line {
      stroke: black;
    }
  </style>
  <!-- No dashes nor gaps -->
  <line x1="0" y1="1" x2="30" y2="1" />

  <!-- Dashes and gaps of the same size -->
  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />

  <!-- Dashes and gaps of different sizes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />

  <!-- Dashes and gaps of various sizes with an odd number of values -->
  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />

  <!-- Dashes and gaps of various sizes with an even number of values -->
  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />

  <!-- Dashes starting with a gap -->
  <line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />
</svg>

Do you have an example that doesn’t work? If you don’t, then we can probably close this issue right now!

And if you just wanted to solve a good first issue in WeasyPrint, we can find a better one in the list. 😄

[FazleRabbbiferdaus172]

I was just scrolling through the issues as I wanted to use it in a project. Would love to contribute and would appreciate it if you could point me to a good first issue. Thanks!

[liZe]

@FazleRabbbiferdaus172 #1961 is a good idea, with detailed steps. Don’t hesitate to ask if there’s anything that’s not clear, we’ll be happy to help!