vector_graphics icon indicating copy to clipboard operation
vector_graphics copied to clipboard

Pattern sizing is wrong

Open dnfield opened this issue 2 years ago • 0 comments

The size of the pattern is being calculated - it's being done in reference to the root viewbox instead of the destination shape - this will often mean that the pattern image is being drawn with too much spacing around it instead of tiling nicely inside the shape. I'll file a separate bug for that.

For example, the SVG at https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern shoudl show ten repeated "stars" across the first circle, but in our case it's calculating the width of the star image based on the viewbox (so 10% of 230 which is 23) instead of the width of the circle (which is 100, so 10% should be 10).

SVG:

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
    </pattern>
  </defs>

  <circle cx="50" cy="50" r="50" fill="url(#star)" />
  <circle
    cx="180"
    cy="50"
    r="40"
    fill="none"
    stroke-width="20"
    stroke="url(#star)" />
</svg>

dnfield avatar Feb 13 '23 22:02 dnfield