search

biocarl / drawing_animation

A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).
https://pub.dartlang.org/packages/drawing_animation
BSD 2-Clause "Simplified" License
488 stars 123 forks source link

Trouble with colors #1

Closed ma-rp closed 5 years ago

ma-rp commented 5 years ago

Hey @biocarl! Thanks for the library it's awesome.

Im having trouble making the lines of a given color other than black. I tried the example3 but the page with the color example doesn't seem to be working for me. I have a svg file with colored strokes but it keeps painting it black.

Thanks!

biocarl commented 5 years ago

Hey @ma-rp, Can you send me the SVG you have trouble with? It might be a parsing problem. For now only hex color codes are supported. Meaning stroke=white or stroke=rgb(255,255,255) are not supported. The latter I probably will add this week.

ma-rp commented 5 years ago

Thanks for the fast reply! I figured out how to make it work; I was using the AnimatedDrawing inside a Container without any luck, and what did the trick was to set a the color of the container to transparent.

Here's the SVF that I'm using if you are still interested. Thanks again!

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   width="645"
   height="585"
   id="svg2">
    <path  fill="none"  stroke="#ff0000" 
       d="M 297.29747,550.86823 C 283.52243,535.43191 249.1268,505.33855 220.86277,483.99412 C 137.11867,420.75228 125.72108,411.5999 91.719238,380.29088 C 29.03471,322.57071 2.413622,264.58086 2.5048478,185.95124 C 2.5493594,147.56739 5.1656152,132.77929 15.914734,110.15398 C 34.151433,71.768267 61.014996,43.244667 95.360052,25.799457 C 119.68545,13.443675 131.6827,7.9542046 172.30448,7.7296236 C 214.79777,7.4947896 223.74311,12.449347 248.73919,26.181459 C 279.1637,42.895777 310.47909,78.617167 316.95242,103.99205 L 320.95052,119.66445 L 330.81015,98.079942 C 386.52632,-23.892986 564.40851,-22.06811 626.31244,101.11153 C 645.95011,140.18758 648.10608,223.6247 630.69256,270.6244 C 607.97729,331.93377 565.31255,378.67493 466.68622,450.30098 C 402.0054,497.27462 328.80148,568.34684 323.70555,578.32901 C 317.79007,589.91654 323.42339,580.14491 297.29747,550.86823 z"/>
</svg>
biocarl commented 5 years ago

Happy to hear that you got it working :+1: