vector_graphics
vector_graphics copied to clipboard
Pattern sizing is wrong
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>