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

Error displaying multiple patterns #855

Closed
virtualzeta opened this issue Feb 11, 2023 · 2 comments · Fixed by dnfield/vector_graphics#181
Closed

Error displaying multiple patterns #855

virtualzeta opened this issue Feb 11, 2023 · 2 comments · Fixed by dnfield/vector_graphics#181

Comments

@virtualzeta
Copy link

virtualzeta commented Feb 11, 2023

HI,

when using multiple patterns in DEFS I notice that they are incorrectly assigned to elements.

Here is an example of SVG code whit 2 PATTERNS in DEFS and 3 CIRCLE.
If I use two elements each of them is assigned to the correct pattern but from 3 onwards the assigned pattern remains the last one.

<svg viewBox="0.0 0.0 180.4 249.4">
  <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>
    <pattern id="arrow" viewBox="0,0,10,10" width="10%" height="10%">
      <path d="M0,0 L7,0 L3.5,7 z" fill="red" stroke="blue"/>
    </pattern>
  </defs>
  <circle id="0" cx="-20" cy="150" r="30" fill="url(#star)" stroke-width="20" stroke="none"/>
  <circle id="1" cx="50" cy="150" r="30" fill="url(#arrow)" stroke-width="20" stroke="none"/>
  <circle id="2" cx="120" cy="150" r="30" fill="url(#star)" stroke-width="20" stroke="none"/>
  <circle id="3" cx="190" cy="150" r="30" fill="url(#arrow)" stroke-width="20" stroke="none"/>
</svg>

I've tried with different elements, also assigning IDs to the targets elements, with fill or stroke, but it's the same.

Only once after an update (the first time I'd tried the four-way sequence) did I see correct behavior vanish right after another update never to return.
In general, however, I notice a certain instability even with a single pattern, even if I took the multiple one as an example, hoping that once that is resolved, the rest will also be resolved.
For example, if you add another element at the end of the code and then remove one/two previous ones, the last one doesn't appear at all. It could be a cache-related behavior as well and it's really frustrating.

But it's just an example because sometimes every time I refresh I get a different fill/disappear result without having changed anything in the SVG code used as a test, as a test to have few elements. But if I can't manage this let alone the ultimate complex ones.

I've done many tests and for now I haven't been able to obtain a stable behavior with pattern (only with PATH but with the described instability but never for example with IMAGE). Only with LINEARGRADIENT for now I managed to get the result almost always (which was the only fill that also worked with 1.1.6, for me).

I'm using the SvgPicture.string method.

Can it be checked?

Thank you.

Current environment
Flutter_svg 2.0.0+1
Flutter SDK 3.8.0-10.0.pre.13
Dart SDK 3.0.0-218.0.dev (Flutter)

@dnfield
Copy link
Owner

dnfield commented Feb 13, 2023

Yeah I'm looking at this and seeing af ew bugs. I think I can get something out soon to fix it.

@dnfield
Copy link
Owner

dnfield commented Feb 13, 2023

This is fixed in the latest vector_graphics, which isn't published yet, but due to dnfield/vector_graphics#182 you are likely to still not be completely happy with that. That one is going to be a little harder to solve.

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

Successfully merging a pull request may close this issue.

2 participants